With Redux
Note: if a Redux integration exists, you might not want to couple your router state to Redux. Anyway that's my advice avec a few years: bind yourself to the router directly.
How to use
You have two ways to use redux-router5, depending on how you want to navigate:
- Using the router5 plugin (named
reduxPlugin) - Using the redux middleware (named
router5Middleware)
In both cases, use the provided reducer (
router5Reducer).Using the router plugin
If you choose to not use the middleware, you need to add
reduxPlugin to your router. The plugin simply syncs the router state with redux. To navigate, you will need to invoke router.navigate. If you use React, you can use BaseLink from react-router5.1
import { reduxPlugin } from 'redux-router5'
2
​
3
// You need a router instance and a store instance
4
router.usePlugin(reduxPlugin(store.dispatch))
Copied!
Using the redux middleware
The redux middleware automatically adds the redux plugin to the provided router instance. It will convert a set of redux actions to routing instructions. The available action creators are:
navigateTo(routeName, routeParams = {}, routeOptions = {})cancelTransition()clearErrors()canActivate(routeName, true | false)canDeactivate(routeName, true | false)
1
import { actions } from 'redux-router5'
Copied!
Use
router5Middleware alongside your other middlewares:1
import { createStore, applyMiddleware } from 'redux'
2
import { router5Middleware } from 'redux-router5'
3
​
4
const createStoreWithMiddleware = applyMiddleware(router5Middleware(router))(
5
createStore
6
)
Copied!
Reducer
This packages exposes a reducer (
router5Reducer) that you can add to your application. It contains four properties:routepreviousRoutetransitionRoute(the current transitioning route)transitionError(the last error which occured)
1
import { combineReducers } from 'redux'
2
import { router5Reducer } from 'redux-router5'
3
​
4
const reducers = combineReducers({
5
router: router5Reducer
6
// ...add your other reducers
7
})
Copied!
Route node selector
In version 6.0.0,
routeNodeSelector has been renamed to createRouteNodeSelector. In order to use it efficiently, you need react-redux >= 4.4.0 to be able to perform per component instance memoization.createRouteNodeSelector is a selector creator designed to be used on a route node and works with connect higher-order component from react-redux.If your routes are nested, you'll have a few route nodes in your application. On each route change, not all components need to be re-rendered.
createRouteNodeSelector will only output a new state value if the provided node is concerned by a route change.1
import { connect } from 'react-redux'
2
import { createRouteNodeSelector } from 'redux-router5'
3
import { Home, About, Contact } from './components'
4
import { startsWithSegment } from 'router5-helpers'
5
​
6
function Root({ route }) {
7
const { params, name } = route
8
const testRoute = startsWithSegment(name)
9
​
10
if (testRoute('home')) {
11
return <Home params={params} />
12
} else if (testRoute('about')) {
13
return <About params={params} />
14
} else if (testRoute('contact')) {
15
return <Contact params={params} />
16
}
17
​
18
return null
19
}
20
​
21
export default connect(createRouteNodeSelector(''))(Root)
Copied!
Using
createRouteNodeSelector with other connect properties:1
export default connect(state => {
2
const routeNodeSelector = createRouteNodeSelector('');
3
​
4
return (state) => ({
5
a: state.a,
6
b: state.b,
7
...routeNodeSelector(state)
8
})
9
)(Root);
Copied!
With immutable-js
If you are using immutable-js and redux-immutable simply use the reducer from 'redux-router5/immutable/reducer'
1
import router5Reducer from 'redux-router5/immutable/reducer'
Copied!
Last modified 2yr ago