A simple redux middleware for handling promises.
The middleware receives a redux-promiser
action and dispatches a set of simplified Flux Standard Action.
$ npm install redux-promiser --save
import { createStore, applyMiddleware } from 'redux';
import { middleware as reduxPromiserMiddleware } from 'redux-promiser';
import thunk from 'redux-thunk';
import rootReducer from './reducer';
const store = createStore(
rootReducer,
applyMiddleware(thunk, reduxPromiserMiddleware),
);
A simple example:
import Api from 'services/myApi';
import { HANDLE_SIMPLE_PROMISE } from 'redux-promiser';
const GET_USERS = 'GET_USERS';
const GET_USERS_SUCCESS = 'GET_USERS_SUCCESS';
const GET_USERS_FAILED = 'GET_USERS_FAILED';
export function getUsers(params) {
return {
type: HANDLE_SIMPLE_PROMISE,
promise: Api.getUsers(params),
handlerTypes: [
GET_USERS,
GET_USERS_SUCCESS,
GET_USERS_FAILED,
],
};
}
const initialState = {
loading: false,
users: [],
error: null,
};
export function usersReducer(state = initialState, action) {
const { type, payload } = action;
switch(type) {
case GET_USERS:
return {
...state,
loading: true,
};
case GET_USERS_SUCCESS:
return {
...state,
loading: false,
users: action.payload,
};
case GET_USERS_FAILED:
return {
...state,
loading: false,
error: action.payload,
};
default:
return state;
}
}
The action must be an object containing the properties type
, promise
, handlerTypes
, and an optional payload
.
type
- A String constant defined and exported byredux-promiser
(HANDLE_SIMPLE_PROMISE
) must be used as thetype
property for the action. Thistype
allows the middleware to know if the current action should be handling a promise.promise
- The promise returned by an async function or API call.handlerTypes
- An array of String containing the three different types of Flux Standard Action known as the request, success, and failure actions. Note: The types must be in order, first for the request action, second for the success action, and third for the failure action. e.g.(['START', 'SUCCESS', 'FAILED'])
payload
- An optional payload property. This will be used as a payload when the action request in the promise lifecycle is dispatched.
The following is a simple redux-promiser action:
import Api from 'services/myApi';
import { HANDLE_SIMPLE_PROMISE } from 'redux-promiser'; // constant for '@redux-promiser/HANDLE_SIMPLE_PROMISE'
export function getUsers(params) {
return {
type: HANDLE_SIMPLE_PROMISE,
promise: Api.getUsers(params),
handlerTypes: ['START', 'SUCCESS', 'FAILED'], // You can specify any type you want.
};
}
When the action is dispatched, redux-promiser
middleware will:
- Check the type of the action and handle it if it is a
HANDLE_SIMPLE_PROMISE
type. - Dispatch the an action with the first type specified in the
handlerTypes
property.
{
type: 'START',
payload, // The optional payload
}
- Handles the promise specified in the
promise
property. - If the promise is successful, an action using the second type will be dispatched with the promise's
data
as thepayload
.
{
type: 'SUCCESS'.
payload: data,
}
- If the promise returned an error, it will dispatch the third type.
{
type: 'FAILED',
payload: error,
error: true,
}