@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

import { configureStore } from '@lagunovsky/redux-react-router'
import { configureStore } from '@reduxjs/toolkit'
import { createBrowserHistory } from 'history'
import React from 'react'
import { createRoot } from 'react-dom/client'
import { Provider, useDispatch } from 'react-redux'
import { Route, Routes } from 'react-router'
import { NavLink } from 'react-router-dom'

const history = createBrowserHistory()
const routerMiddleware = createRouterMiddleware(history)

const store = configureStore({
  reducer: createRouterReducerMapObject(history),
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().prepend(routerMiddleware),
})

function Content() {
  const dispatch = useDispatch()
  
  const onClickHandler = () => {
    const action = push(Date.now().toString())
    dispatch(action)
  }
  
  return (
    <>
      <NavLink to={'/'} children={'Home'}/>
      <button type={'button'} onClick={onClickHandler} children={'Rand'}/>
    </>
  )
}

function App() {
  return (
    <Provider store={store}>
      <ReduxRouter history={history}>
        <Routes>
          <Route path={'*'} element={<Content/>}/>
        </Routes>
      </ReduxRouter>
    </Provider>
  )
}

Note: the history object provided to reducer, middleware, and 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'

Changelog

4.2.0

Minor Changes

• improved compatibility with @reduxjs/toolkit
• useEffect usage fix