redux-normalizr3-middleware
v2.0.1
Published
Combines redux middleware and normalizr to make flattening nested data a snap
Downloads
3
Maintainers
Readme
redux-normalizr-middleware
Combines the power of redux middleware and @gaearon's normalizr to make flattening relational, nested data a snap.
Use with redux-thunk or redux-promise-middleware to easily request and store your API's response in a database-like fashion in your redux apps!
For an example of a more manual implementation, check out the real-world example in redux
Installation
npm install --save redux-normalizr-middleware
Usage
Place this middleware before anything that expects flattened data, and after anything that makes the nested data available (so before something like redux-thunk or redux-promise-middleware).
redux-normalizr-middleware assumes that your actions comply with FSA and
that your nested data is available as the payload
property in your
action, and will normalize and store the flattened data in the same
payload
property. Opt into redux-normalizr-middleware by supplying a
normalizr schema as
schema
in your action's meta
object.
Example
import normalizrMiddleware from 'redux-normalizr-middleware';
// import a schema defined using normalizr's `Schema`s to apply
// to the response
import todoSchema from './todo-schema';
const createStoreWithNormalizr =
applyMiddleware(normalizrMiddleware())(createStore);
// See the redux real-world example for this reducer pattern
const store = createStoreWithNormalizr({
entitiesReducer: () => {},
todosByAuthor: () => {}
});
// This could be dispatched from redux-thunk or redux-promise-middleware
store.dispatch({
type: 'TODO_RECEIVED',
payload: nestedTodoResponse,
meta: {
schema: todoSchema
}
});
In the above, middlware following redux-normalizr-middleware and reducers
connected to the redux store will receive the action payload as normalized,
flattened data with entities
and results
!