redux-handler-middleware v1.0.4
Redux Handler Middleware
Middleware that executes custom handlers before and after state updates. This can be especially useful for handling navigation redirects.
Install
npm install redux-handler-middleware --save
Quick Example
middleware/handlerMiddleware.js
import browserHistory from 'react-router/lib/browserHistory';
import createHandlerMiddleware from 'redux-handler-middleware';
import {FETCH_POST_FAILURE, FETCH_POSTS_FAILURE} from 'constants/blog';
const handlerMiddleware = createHandlerMiddleware([{
actions: [FETCH_POSTS_FAILURE, FETCH_POST_FAILURE],
afterHandler: (store, action) => {
if(action.payload.status === 404){
browserHistory.push('/404');
}
}
}]);
export default handlerMiddleware;
store/createStore.js
import { createStore, applyMiddleware, combineReducers } from 'redux';
import handlerMiddleware from 'middleware/handlerMiddleware';
import rootReducer from 'reducers';
export default createStore(
rootReducer,
{},
applyMiddleware(handlerMiddleware)
);
So now when a FETCH_POSTS_FAILURE
or a FETCH_POST_FAILURE
action is dispatched, the afterHandler will be invoked after the state updates and it will redirect you to /404
. This provides a simple and intuitive solution to navigating in response to actions.
Usage
createHandlerMiddleware
- Function
Must be passed an array of plain objects.
Defining Handlers
action
- String
The type of the action. This is used when determining which handlers to fire.
actions
- Array of actions
This is useful when multiple action types use the same handler.
beforeHandler
- Function
Handler to be called before the state is updated.
afterHandler
- Function
Handler to be called after the state is updated.
Special Thanks
to Diego Castillo who came up with the original idea in his blog post.