Redux Obtain

redux-obtain works with React Redux to coordinate getting data from a server using React component lifecycles to manage the asychronous actions and Redux to store all of its state.

Installation

npm install --save redux-obtain

or if you prefer yarn

yarn add redux-obtain

Usage

First, hook up redux-obtain into your root reducer:

import { createStore, combineReducers } from "redux"
import { reducer as resourceReducer } from "redux-obtain"

const rootReducer = combineReducers({
    // ...your other reducers here
    resources: resourceReducer
})

const store = createStore(rootReducer)

Then use a fetcher component to obtain some data

import React from "react"
import { fetcher } from "redux-obtain"

const TodoList = ({ data: { todos }, loading, error }) =>
    loading ? (
        <div>Loading</div>
    ) : error ? (
        <div>Error</div>
    ) : (
        <ul>{todos && todos.map((item, index) => <li key={index}>{item.text}</li>)}</ul>
    )

export default fetcher({
    name: "TODO_LIST",
    endpoint: "/todos",
    method: "GET"
})(TodoList)

It's as simple as that! redux-obtain will manage fetching/storing/removing all the data from your redux store for you.

Fetcher Options

| Option | Required | Type | Default | Purpose | | --------------------- | -------- | ------------------ | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | name | YES | String | | This is the unique name given to the resource. It is required to access it | | endpoint | YES | String or Selector | | The endpoint to call for the resource. A redux store selector can be used for a dynamic endpoint. | | method | YES | http method | | Method to call endpoint | | paginationKey | NO | String | undefined | If given, this enables pagination. The presence of this option overrides method, setting it to POST. | | requestBodySelector | NO | Selector | () => undefined | Selects the request body from the redux store. Will trigger a Request for data if the result of the selector changes. | | persistResource | NO | Boolean | false | If given, the resource will not remove itself from the store on unmount. | | defaultOrderBys | NO | Object | { sortBy: [], sortDirection: [] } | Used for paginated resources. This is the ordering that will be sent with the first request. | | acceptResponse | NO | Selector | x => x | This is applied to the response from the server, before it is saved to the redux store. Normalization / Transformation should be done here. |

Documentation

• Getting Started
• Modifying the State
• Configuration
• Responsive Endpoints
• Pagination
• Selectors

License

MIT