redux-reducer-async

Create redux reducers for async behaviors of multiple actions.

Be DRY & reduce boilerplate. Standardize state schema with managed properties for loading, success, and error cases.

Think of it as redux-actions for asynchronous reducers.

Works with Flux Standard Actions (FSA). By default, supports the action type conventions of redux-promise-middleware, but see Custom Action Types below for configuration to support redux-promise.

Install

Use

import createReducer from 'redux-reducer-async'

const myActionReducer = createReducer('MY_ACTION')

results in a reducer like this:

(state = {}, action = {}) => {
  switch (action.type) {
    case 'MY_ACTION_PENDING':
      return { ...state, loading: true, error: null }
    case 'MY_ACTION_FULFILLED':
      return { ...state, loading: false, error: null, data: action.payload }
    case 'MY_ACTION_REJECTED':
      return { ...state, loading: false, error: action.payload }
    default:
      return state
  }
}

You can then mount it with combineReducers:

import { combineReducers } from 'redux'
import createReducer from 'redux-reducer-async'

const rootReducer = combineReducers({
  myAction: createReducer('MY_ACTION')
})

Or even call it manually within another reducer (useful with custom properties or reducers):

import createReducer from 'redux-reducer-async'

const myActionReducer = createReducer('MY_ACTION')

const reducer = (state = {}, action = {}) => {
  state = myActionReducer(state, action)
  // ...
  return state
}

Custom Properties

You can provide custom property names (all optional) for each case to be used on the state:

createReducer('MY_ACTION', {
  loading: 'isMyActionLoading',
  success: 'myActionData',
  error: 'myActionError'
})

Custom Reducers

You can also provide custom reducer functions (again all optional, but be careful to define all cases if you use non-standard property names in one):

createReducer('MY_ACTION', {
  loading: state => ({
    ...state,
    myActionError: null,
    myActionIsLoading: true,
    extra: 'whatever'
  })
  // success, error...
})

And you can even mix these with custom properties:

createReducer('MY_ACTION', {
  loading: 'isLoading',
  error: (state, action) => ({
    ...state,
    isLoading: false,
    error: action.payload,
    also: 'etc'
  })
})

Custom Action Types

You can provide custom action types.

For example, to support redux-promise, which uses same the action type for success and error cases (though it does not provide a loading action), you can use finalActionType:

import createReducer, { finalActionType } from 'redux-reducer-async'

createReducer(finalActionType('MY_ACTION'))

which is effectively like providing custom action types:

createReducer({
  loading: 'MY_ACTION_PENDING',
  success: 'MY_ACTION',
  error: 'MY_ACTION'
})

Or similarly by passing suffixes to the actionTypes helper, which is normally used to explicitly define all types:

import createReducer, { actionTypes } from 'redux-reducer-async'

createReducer(actionTypes('MY_ACTION', '_LOADING', '_SUCCESS', '_ERROR'))

But can also be used to suppress suffixes (here undefined means use default):

createReducer(actionTypes('MY_ACTION', undefined, '', ''))

Transforms

As a shortcut to defining custom reducers, you can provide transform functions to manipulate only the payload, optionally in success and/or error cases:

createReducer('MY_ACTION', {
  transform: payload => ({
    ...payload,
    title: payload.title.trim()
  }),
  transformError: payload => ({
    ...payload,
    message: `There was an error: ${payload.message}`
  })
})