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}`
})
})