make-reducer-async v0.0.4

make-reducer-async

Higher-order reducer to handle async data.

usage reducers/index.js

Let's assume we're fetching a user object from the server.

import makeReducerAsync from 'make-reducer-async';
import userReducer from 'user-reducer';

const options = {};

export default {
  user: makeReducerAsync(options)(userReducer, 'USER')
}

Your async action (possibly with redux-thunk), will look something like:

export default () => dispatch => {
  dispatch({ type: 'FETCH_USER_REQUEST' });

  fetch(endpoint)
    .then(user => dispatch({ type: 'FETCH_USER_SUCCESS', payload: user }))
    .catch(error => dispatch({ type: 'FETCH_USER_FAILURE', payload: error }))
}

Your state will look something like:

{
  user: {
    hasFetched: false,
    isFetching: false,
    value: [value]
  }
}

Options:

{
  failure = key => `FETCH_${key}_FAILURE`,
  invalidate = key => `INVALIDATE_${key}`,
  request = key => `FETCH_${key}_REQUEST`,
  success = key => `FETCH_${key}_SUCCESS`,
}