@healthfocus/redux-obtain

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