Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork2
Create redux reducers for async behaviors of multiple actions.
License
AndersDJohnson/redux-reducer-async
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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 asredux-actions for asynchronous reducers.
Works withFlux Standard Actions (FSA).By default, supports the action type conventions of redux-promise-middleware,but seeCustom Action Types below for configuration to supportredux-promise.
importcreateReducerfrom'redux-reducer-async'constmyActionReducer=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:returnstate}}
You can then mount it withcombineReducers:
import{combineReducers}from'redux'importcreateReducerfrom'redux-reducer-async'constrootReducer=combineReducers({myAction:createReducer('MY_ACTION')})
Or even call it manually within another reducer (useful withcustom properties orreducers):
importcreateReducerfrom'redux-reducer-async'constmyActionReducer=createReducer('MY_ACTION')constreducer=(state={},action={})=>{state=myActionReducer(state,action)// ...returnstate}
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'})
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'})})
You can provide custom action types.
For example, to supportredux-promise, which uses same the action type for success and error cases (though it does not provide a loading action),you can usefinalActionType:
importcreateReducer,{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 theactionTypes helper,which is normally used to explicitly define all types:
importcreateReducer,{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,'',''))
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}`})})
About
Create redux reducers for async behaviors of multiple actions.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Packages0
Uh oh!
There was an error while loading.Please reload this page.