redux-effects-steps
Another version of redux-effects handling error action properly.
Installation
npm install --save redux-effects-steps
Usage
Installing the middleware
;;; const store = ;
Defining action creators
;;; const fetchUserRequest = ;const fetchUserSuccess = ;const fetchUserFail = ; { return ;}
Using actions
const promise = store;
Under the food
Example:
const promise = store;
is evaluated by redux-effects-steps like this:
const promise = store ;
Kind of Actions
Async Actions
Async action returns a Promise object when it's dispatched. If the dispatched action fails, the returned Promise will be rejected.
Sync Actions
Sync action returns an object which is not a Promise (by default, dispatched action itself.) when it's dispatched. If the action represents fail, it should be error action.
Defferences from redux-effects
Error handling
redux-effects:
;;; const success = ;const failure = ; { return ;} const finalPromise = store;
If fetch()
action fails, the
error action
created by failure()
is dispatched.
And then, redux-effects resolves the next Promise, so the finalPromise
isn't rejected.
This is the problem when the action creator is used with redux-form.
In this example, onSubmit()
handler always succeed if the action fails.
MyForm
On the other hand, redux-effects-steps rejects the next Promise when error action is dispatched.
Action creator
redux-effects provides an action creator takes just one step.
; const action = ;
redux-effects-steps provides an action creator takes multiple steps.
; const action = ;
API
Action Creators
steps(origin, [...steps])
Arguments
origin
(Array|Object)- One of the:
action
(Object): A FSA compliant action object.actions
(Array): An array of actions.
- One of the:
steps
(Array)- Each element is in a
[success, failure]
tuple Array. success
andfailure
are one of the:- If
failure
is not needed, you can pass justsuccess
instead of an Array.
- Each element is in a
Returns
(Object): A FSA compliant action object.