redux-normalizr

Installation

npm install --save redux-normalizr

Usage

Functions

• normalizrMiddleware ⇒ Boolean

Return a middleware for redux applyMiddleware function.

Typedefs

• GetDataCb ⇒ Object

This callback fetch the data to normalize in the action

• PostNormalizeCb ⇒ Object

This callback trigger after normalization and can mutate data

• OnNextCb ⇒ Object

This callback trigger just before leaving for mutate the action or dispatch actions

GetDataCb ⇒ Object

This callback fetch the data to normalize in the action

Kind: Callback Returns: Object - data to normalize

| Param | Type | Description | | --- | --- | --- | | store | ReduxStore | redux store | | action | ReduxAction | redux action |

PostNormalizeCb ⇒ Object

This callback trigger after normalization and can mutate data

Kind: Callback Returns: Object - mutated data

| Param | Type | Description | | --- | --- | --- | | normalizedData | ReduxAction | redux action |

OnNextCb ⇒ Object

This callback trigger just before leaving for mutate the action or dispatch actions

Kind: Callback Returns: Object - normalized data

| Param | Type | Description | | --- | --- | --- | | store | ReduxStore | redux store | | action | ReduxAction | redux action | | normalizedData | ReduxAction | redux action |

normalizrMiddleware(options) ⇒ Boolean

Return a normalizer-middleware for redux

Kind: global function
Returns: Boolean - shouldBeProcessed

| Param | Type | Description | | --- | --- | --- | | options | Object | middleware options | | options.getActionData | GetDataCb | getData in action object | | options.onNextAction | OnNextCb | mutate action before sending | | options.onNormalizeData | PostNormalizeCb | mutate data after normalizr | | options.actionFilter | String | Regex | filter of action type to handle |

import normalizrMiddleware from 'redux-normalizer'

applyMiddleware(normalizrMiddleware({}));

Examples

Simple use case

A simple usage could be :

import { compose, createStore, applyMiddleware } from 'redux';
import normalizrMiddleware from 'redux-normalizr';
import reducers from './reducers';

export default initialState => createStore(
  reducers,
  initialState,
  compose(applyMiddleware(
      normalizrMiddleware({}),
    )
  ))

In this case all actions with a field :

{
  meta: {
    schema: normalizerSchema,
  }
}

will have it payload field replaced by :

normalize(payload, schema)

A use-case with redux-promise middleware

import reducers from './reducers'
/**
 *  Catch all resolved promise, normalize payload.data field,
 *  send normalized data to a reducer which act as localStore
 *  and send only id's to UI reducers
 */
const onNextAction = (store, action, normalizedData) => {
  store.dispatch({
    type: 'STORE_UPDATE',
    payload: normalizedData.entities,
  });

  return ({
    ...action,
    payload: {
      ...action.payload,
      data: normalizedData.result,
    },
  });
};

const getActionData = (store, action) => action.payload.data;

const normalizrConfig = {
  onNextAction,
  getActionData,
  actionFilter: /_FULFILLED$/,
};

/**
 * Create store with reducers and middlewares
 * @param  {Object}     initialState    store initial state
 * @return {ReduxStore} the redux store generated
 */
export default initialState => createStore(
  reducers,
  initialState,
  compose(applyMiddleware(
    promise(),
    normalizr(normalizrConfig),
    thunk,
  ))
);