Redux Combine Actions
This is a Redux middleware that allows you to easy combine async actions and dispatch them either sequentially or in parallel.
Installation
npm install --save redux-combine-actions
Usage
To enable redux-combine-actions use applyMiddleware()
;;; let createStoreWithMiddleware = createStore; let reducer = ;let store = ;
To use the middleware, you action creator must return action with the following fields:
types
- An array of action types in the next notation: [PENDING, SUCCESS, ERROR], where PENDING action is dispatched immediately, SUCCESS action is dispatched only if all child actions were executed successfully and ERROR action is dispatched only if an error occurred.payload
- An array of action creators. This field must contain set of functions which shall be dispatched. For example, it can be ordinary action creators, or action creators that return a promise (see redux-promise or redux-promise-middleware), in this case, you can specifysequence
option.sequence
- Specifies actions sequence. Iftrue
- dispatch array of action creators in sequential order, else - dispatch in parallel.
The middleware returns a promise to the caller and a FSA compliant action for both SUCCESS and ERROR action types.
Simple usage
{ return type: ADD_TODO text ;} { return type: INCREMENT_COUNTER ;} // Combine "addTodo" and "increment" actions { return types: 'COMBINED_ACTION_START' 'COMBINED_ACTION_SUCCESS' 'COMBINED_ACTION_ERROR' // Pass actions in array payload: addTodo increment ;} // Dispatch actionstore;
This will dispatch actions in the following sequence:
COMBINED_ACTION_START
> ADD_TODO
> INCREMENT_COUNTER
> COMBINED_ACTION_SUCCESS
With promises
Using in combination with redux-promise-middleware.
{ return types: 'PROVIDERS_GET_PENDING' 'PROVIDERS_GET_SUCCESS' 'PROVIDERS_GET_ERROR' payload: promise: api ;} { return types: 'SUBSCRIBER_GET_PENDING' 'SUBSCRIBER_GET_SUCCESS' 'SUBSCRIBER_GET_ERROR' payload: promise: api ;} // Combine "getProviders" and "getSubscribers" actions { return types: 'DATABASE_FETCH_PENDING' 'DATABASE_FETCH_SUCCESS' 'DATABASE_FETCH_ERROR' // Set true for sequential actions sequence: true // Pass actions in array payload: getProviders getSubscribers ;}
This will dispatch actions one after another:
DATABASE_FETCH_PENDING
> PROVIDERS_GET_PENDING
> PROVIDERS_GET_SUCCESS
> SUBSCRIBER_GET_PENDING
> SUBSCRIBER_GET_SUCCESS
> DATABASE_FETCH_SUCCESS
If you set sequence
to false
then all child actions will be dispatched in parallel:
DATABASE_FETCH_PENDING
> PROVIDERS_GET_PENDING
> SUBSCRIBER_GET_PENDING
> PROVIDERS_GET_SUCCESS
> SUBSCRIBER_GET_SUCCESS
> DATABASE_FETCH_SUCCESS
License
MIT