redux-route-middleware v1.0.0
redux-route-middleware
A redux middleware allowing you to route through redux actions. If you also have the redux-axios-middleware you can route based on the success or failure of axios requests.
Install
npm i -S redux-route-middleware
Setup
To set up this middleware you will have to instantiate your own history object. Keep in mind that history is a dependency of React Router, so you likely already have it included in your project.
import { createStore, applyMiddleware } from 'redux';
import createHistory from 'history/createBrowserHistory';
import createRouteMiddleware from 'redux-route-middleware';
let history = createHistory();
let store = createStore(
reducers, // custom reducers
initialState, // initial state
applyMiddleware(
... //other middleware
createRouteMiddleware(history),
...)
);
Use With React Router
If you are using react-router-dom, then instead of using \, \, or \, you will need to use \ and pass it the history object you created in the initial setup.
import { Router } from 'react-router-dom';
...
<Router history = {history}>
...
</Router>
Creating Actions
This middleware will handle any objects found under the route
object in an action. The structure of route
closely mimics the function calls to the history object:
history.push('/Home');
route: {
history: {
push: '/Home'
}
}
history.replace('/Home');
route: {
history: {
replace: '/Home'
}
}
history.go(-1);
route: {
history: {
go: -1
}
}
Immediate Routing
If you would like to dispatch a history action that will be immediately carried out, simply include a route object in your dispatch action with either push, go, or replace:
{
type: 'ANY_ACTION',
route: {
history: {
push: '/Home'
}
}
}
Async routing with redux-axios-middleware
If you are also using the redux-axios-middlware you can also route based on the success or failure of axios requests in addition to the immediate routing:
{
type: 'TRY_LOGIN',
payload: {
//...payload object as documented in redux-axios-middleware
}
route: {
history: {
push: '/Loading'
},
success: {
history: {
replace: '/Home'
}
},
fail: {
history: {
push: '/Error',
}
}
}
}
License
This project is licensed under the MIT license, Copyright (c) 2018 Richard Fornario. For more information see LICENSE
.
Acknowledgements
Michal Svrcek for redux-axios-middleware
6 years ago