Redux React Router

A Redux binding for React Router

• Main features
• Installation
• Usage
• • Examples
• • API
• Migrate from Connected React Router

Main features

• Synchronize router state with redux store through uni-directional flow (i.e. history -> store -> router -> components).
• Supports React Router v6 and History v5
• Supports functional component hot reloading while preserving state.
• Dispatching of history methods (push, replace, go, back, forward) works for both redux-thunk and redux-saga.
• Nested children can access routing state such as the current location directly with react-redux's connect.
• Supports time traveling in Redux DevTools.
• TypeScript

Installation

Redux React Router requires React 16.8, React Redux 6.0, React Router 6.0 or later.

1npm install --save @lagunovsky/redux-react-router

1yarn add @lagunovsky/redux-react-router

Usage

Examples

Note: the history object provided to reducer, middleware, and component must be the same history object.

@reduxjs/toolkit

1import { createRouterMiddleware, createRouterReducerMapObject, push, ReduxRouter } from '@lagunovsky/redux-react-router'
2import { configureStore } from '@reduxjs/toolkit'
3import { createBrowserHistory } from 'history'
4import React from 'react'
5import { createRoot } from 'react-dom/client'
6import { Provider, useDispatch } from 'react-redux'
7import { Route, Routes } from 'react-router'
8import { NavLink } from 'react-router-dom'
9
10const history = createBrowserHistory()
11const routerMiddleware = createRouterMiddleware(history)
12
13const store = configureStore({
14  reducer: createRouterReducerMapObject(history),
15  middleware: (getDefaultMiddleware) => getDefaultMiddleware().prepend(routerMiddleware),
16})
17
18function Content() {
19  const dispatch = useDispatch()
20
21  const onClickHandler = () => {
22    const action = push(Date.now().toString())
23    dispatch(action)
24  }
25
26  return (
27    <>
28      <NavLink to={'/'} children={'Home'}/>
29      <button type={'button'} onClick={onClickHandler} children={'Rand'}/>
30    </>
31  )
32}
33
34function App() {
35  return (
36    <Provider store={store}>
37      <ReduxRouter history={history}>
38        <Routes>
39          <Route path={'*'} element={<Content/>}/>
40        </Routes>
41      </ReduxRouter>
42    </Provider>
43  )
44}

redux.createStore and custom selector

1import { createRouterMiddleware, createRouterReducer, push, ReduxRouter, ReduxRouterSelector } from '@lagunovsky/redux-react-router'
2import { createBrowserHistory } from 'history'
3import React from 'react'
4import { createRoot } from 'react-dom/client'
5import { Provider, useDispatch } from 'react-redux'
6import { Route, Routes } from 'react-router'
7import { NavLink } from 'react-router-dom'
8import { applyMiddleware, combineReducers, compose, createStore } from 'redux'
9
10const history = createBrowserHistory()
11const routerMiddleware = createRouterMiddleware(history)
12
13const rootReducer = combineReducers({ navigator: createRouterReducer(history) })
14
15const store = createStore(rootReducer, compose(applyMiddleware(routerMiddleware)))
16type State = ReturnType<typeof store.getState>
17
18const routerSelector: ReduxRouterSelector<State> = (state) => state.navigator
19
20function App() {
21  return (
22    <Provider store={store}>
23      <ReduxRouter history={history} routerSelector={routerSelector}>
24        <Routes>
25          <Route path={'*'} element={<div/>}/>
26        </Routes>
27      </ReduxRouter>
28    </Provider>
29  )
30}

API

Types

1type ReduxRouterProps = {
2  history: History
3  basename?: string
4  children?: React.ReactNode
5  routerSelector?: ReduxRouterSelector 
6}

1type ReduxRouterState = {
2  location: history.Location
3  action: history.Action
4}

Constants

1const ROUTER_REDUCER_MAP_KEY = 'router'
2const ROUTER_CALL_HISTORY_METHOD = '@@router/CALL_HISTORY_METHOD'
3const ROUTER_ON_LOCATION_CHANGED = '@@router/ON_LOCATION_CHANGED'

createRouterMiddleware(history: History) => Middleware

A middleware you can apply to your Redux store to capture dispatched actions created by the action creators. It will redirect those actions to the provided history instance.

createRouterReducerMapObject(history: History) => {router: Reducer<ReduxRouterState>}

Creates a reducer map object that stores location updates from history.

createRouterReducer(history: History) => Reducer<ReduxRouterState>

Creates a reducer function that stores location updates from history. Note: If you create a reducer with a key other than ROUTER_REDUCER_MAP_KEY, you must add a selector (state: State) => ReduxRouterState to your <ReduxRouter/> as routerSelector prop.

reduxRouterSelector(state: State): ReduxRouterState

Selector that returns location updates from history.

Action creators

Same as history methods

• push
• replace
• go
• back
• forward

By default, history methods calls in middleware are wrapped in a queueMicrotask. If you want to avoid it, please use the following methods:

• pushStraight
• replaceStraight
• goStraight
• backStraight
• forwardStraight

Migrate from Connected React Router

1- import { connectRouter } from 'connected-react-router'
2+ import { createRouterReducer } from '@lagunovsky/redux-react-router'
3
4- export const routerReducer = connectRouter(history)
5+ export const routerReducer = createRouterReducer(history)

1- import { routerMiddleware } from 'connected-react-router'
2+ import { createRouterMiddleware } from '@lagunovsky/redux-react-router'
3
4- export const routerMiddleware = routerMiddleware(history)
5+ export const routerMiddleware = createRouterMiddleware(history)

1- import { ConnectedRouter } from 'connected-react-router'
2+ import { ReduxRouter } from '@lagunovsky/redux-react-router'
3
4- <ConnectedRouter history={history} />
5+ <ReduxRouter history={history} />

1- import { RouterState } from 'connected-react-router'
2+ import { ReduxRouterState } from '@lagunovsky/redux-react-router'