redux-asyncState-reducer
This is a redux reducer to handle the asynchronous state changes that happen during a request. The idea comes form the Redux documentation on Async Actions
Install
npm install --save redux-async-state-reducer
Usage
Combine the reducer into your root reducer, using combineReducers
.
; ; const rootReducer = ; const store = ;
ActionCreators
These action creators can be added to the actions of your application. My solution is to export them with the rest of my action creators.
actionCreator | isFetching |
didFail |
success |
---|---|---|---|
request |
true | false | false |
requestFail |
false | true | false |
requestSuccess |
false | false | true |
My Usage
I use this reducer to inform my application of the state of the asynchronous tasks I am processing. Say I am fetching data from a Database, and want to show a loading component until the results come back.
;; ;; { superprops; const actions = thisprops // I keep all my actionCreators under actions actions; // using component state for demo purposes. Explanation below. thisstate = error: null data: ; axios ; } { const asyncState = thisprops; return asyncState ? <ProgressBar type='circular' mode='indeterminate' /> : <LongList data=thisstatedata /> }
I use the other properties didFail
& success
to help with displaying error as well.
Explanation
Instead of using the state of the Component I would dispatch an action with the promise from axios. I would have redux-promise handle this promise by calling then
and finally passing the returned data through to the reducers to update the store.
However I wanted to show how the request would be made and when to dispatch the actions provided by this module.
License: (MIT)