@lagunovsky/redux-react-router

Redux React Router

A Redux binding for React Router

• Main features
• Installation
• Usage
• 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.

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

Or

$ yarn add @lagunovsky/redux-react-router

Usage

See the examples folder

Note: the history object provided to router reducer, routerMiddleware, and ReduxRouter component must be the same history object.

Migrate from Connected React Router

- import { connectRouter } from 'connected-react-router'
+ import { createRouterReducer } from '@lagunovsky/redux-react-router'

- export const routerReducer = connectRouter(history)
+ export const routerReducer = createRouterReducer(history)

- import { routerMiddleware } from 'connected-react-router'
+ import { createRouterMiddleware } from '@lagunovsky/redux-react-router'

- export const routerMiddleware = routerMiddleware(history)
+ export const routerMiddleware = createRouterMiddleware(history)

- import { ConnectedRouter } from 'connected-react-router'
+ import { ReduxRouter } from '@lagunovsky/redux-react-router'

- <ConnectedRouter history={history} />
+ <ReduxRouter history={history} />

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