redux-first-history

Redux First History - Make Redux 100% SINGLE-AND-ONLY source of truth!

Redux history binding for

• react-router
• @reach/router
• wouter
• react-location
• Mix react-router - @reach/router - wouter - react-location in the same app! See Demo.

Compatible with immer - redux-immer - redux-immutable.

:tada: A smaller, faster, optionated, issue-free alternative to connected-react-router

Table of Contents

• Main Goal
  • Demo
• Main Features
• Installation
• Usage
• Options
• Advanced Config
• Feedback
• Credits & Inspiration
• Contributors
• License

Main Goal

While working with relatively large projects, it's quite common to use both redux and react-router.

So you may have components that take location from the redux store, others that take location from router context, and others from withRouter HOC.

This can generate sync issues, due to the fact that many components are updated at different times. In addition, React shallowCompare rendering optimization will not work as it should.

With redux-first-history, you can mix components that get history from wherever, they will always be tunneled to state.router.location !

Use whatever you like. History will just work as it should.

1//react-router v5 - v6
2useLocation() === state.router.location
3
4//react-router v5
5this.props.history.location === state.router.location
6this.props.location === state.router.location
7withRouter.props.location === state.router.location
8
9//react-router v4
10this.context.router.history.location === state.router.location
11this.context.route.location === state.router.location
12
13//@reach/router
14this.props.location === state.router.location
15
16//wouter - pathname
17useLocation()[0] === state.router.location.pathname

Mix redux, redux-saga, react-router, @reach/router, wouter and react-location without any synchronization issue!
Why? Because there is no synchronization at all! There is only one history: reduxHistory!

• One way data-flow
• One unique source of truth
• No more location issues!

Demo

• react-router v6: https://wvst19.csb.app/

  • Source: https://codesandbox.io/s/redux-first-history-demo-rr6-forked-wvst19

• react-router v5: https://wy5qw1125l.codesandbox.io/

  • Source: https://codesandbox.io/s/wy5qw1125l

Main Features

• 100% one source of truth (store)
• No synchronization depending on rendering lifecycle (ConnectedRouter)
• No React dependency (we want history to be always in store!)
• 100% one-way data flow (only dispatch actions!)
• Improve React shallowCompare as there is only one "location"
• Support react-location 3.x
• Support react-router v4 / v5 / v6
• Support @reach/router 1.x
• Support wouter 2.x
• Support mix react-router, @reach/router & wouter in the same app!
• Fast migration from an existing project, with the same LOCATION_CHANGE and push actions (taken from RRR)
• Handle Redux Travelling from dev tools (that's nonsense in production, but at the end of the day this decision it's up to you ...)

Installation

Using npm:

$ npm install --save redux-first-history

Or yarn:

$ yarn add redux-first-history

Usage

store.js

1import { createStore, combineReducers, applyMiddleware } from "redux";
2import { composeWithDevTools } from "redux-devtools-extension";
3import { createReduxHistoryContext, reachify } from "redux-first-history";
4import { createWouterHook } from "redux-first-history/wouter";
5import { createBrowserHistory } from 'history';
6
7const { createReduxHistory, routerMiddleware, routerReducer } = createReduxHistoryContext({ 
8  history: createBrowserHistory(),
9  //other options if needed 
10});
11
12export const store = createStore(
13  combineReducers({
14    router: routerReducer
15    //... reducers //your reducers!
16  }),
17  composeWithDevTools(
18    applyMiddleware(routerMiddleware)
19  )
20);
21
22export const history = createReduxHistory(store);
23//if you use @reach/router 
24export const reachHistory = reachify(history);
25//if you use wouter
26export const wouterUseLocation = createWouterHook(history);

store.js (with @reduxjs/toolkit)

1import { combineReducers } from "redux";
2import { configureStore } from "@reduxjs/toolkit";
3import { createReduxHistoryContext } from "redux-first-history";
4import { createBrowserHistory } from "history";
5
6const {
7  createReduxHistory,
8  routerMiddleware,
9  routerReducer
10} = createReduxHistoryContext({ history: createBrowserHistory() });
11
12export const store = configureStore({
13  reducer: combineReducers({
14    router: routerReducer
15  }),
16  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(routerMiddleware),
17});
18
19export const history = createReduxHistory(store);

app.js

1import React, { Component } from "react";
2import { Provider, connect } from "react-redux";
3import { Router } from "react-router-dom";
4import { store, history } from "./store";
5
6const App = () => (
7      <Provider store={store}>
8        <Router history={history}>
9        //.....
10        </Router>
11      </Provider>
12    );
13
14export default App;

app.js (react-router v6)

1import React, { Component } from "react";
2import { Provider } from "react-redux";
3import { HistoryRouter as Router } from "redux-first-history/rr6";
4import { store, history } from "./store";
5
6const App = () => (
7      <Provider store={store}>
8        <Router history={history}>
9        //.....
10        </Router>
11      </Provider>
12    );
13
14export default App;

saga.js (react-saga)

1import { put } from "redux-saga/effects";
2import { push } from "redux-first-history";
3
4function* randomFunction() {
5  //....
6  yield put(push(YOUR_ROUTE_PATH));
7  //....
8}

slice.js (in a Thunk with @reduxjs/toolkit)

1import { push } from "redux-first-history";
2
3export const RandomThunk = (dispatch) => {
4  //....
5  dispatch(push(YOUR_ROUTE_PATH));
6  //....
7}

• Just a simple Router with no more ConnectedRouter!
• Probably, you already did connect the Redux store with react-router-redux or connected-react-router (in this case you have only to replace the import!)

Options

1export const createReduxHistoryContext = ({
2  history, 
3  routerReducerKey = 'router', 
4  reduxTravelling = false, 
5  selectRouterState = null,
6  savePreviousLocations = 0,
7  batch = null,
8  reachGlobalHistory = null
9})

key	optional	description
history	no	The createBrowserHistory object - v4.x/v5.x
routerReducerKey	yes	if you don't like router name for reducer.
reduxTravelling	yes	if you want to play with redux-dev-tools :D.
selectRouterState	yes	custom selector for router state. With redux-immutable selectRouterState = state => state.get("router")
savePreviousLocations	yes	if > 0 add the key "previousLocation" to state.router, with the last N locations. [{location,action}, ...]
batch	yes	a batch function for batching states updates with history updates. Prevent top-down updates on react : usage import { unstable_batchedUpdates } from 'react-dom'; batch = unstable_batchedUpdates
reachGlobalHistory	yes	globalHistory object from @reach/router - support imperatively navigate of @reach/router - import { navigate } from '@reach/router' : usage import { globalHistory } from '@reach/router'; reachGlobalHistory = globalHistory
basename	no	support basename (history v5 fix)

Advanced Config

• Support "navigate" from @reach/router

1import { createReduxHistoryContext, reachify } from "redux-first-history";
2import { createBrowserHistory } from 'history';
3import { globalHistory } from '@reach/router';
4
5const { createReduxHistory, routerMiddleware, routerReducer } = createReduxHistoryContext({ 
6  history: createBrowserHistory(),
7  reachGlobalHistory: globalHistory,
8  //other options if needed 
9});

• React batch updates: top-down batch updates for maximum performance. Fix also some updated edge cases.

1import { createReduxHistoryContext, reachify } from "redux-first-history";
2import { createBrowserHistory } from 'history';
3import { unstable_batchedUpdates } from 'react-dom';
4
5const { createReduxHistory, routerMiddleware, routerReducer } = createReduxHistoryContext({ 
6  history: createBrowserHistory(),
7  batch: unstable_batchedUpdates,
8  //other options if needed 
9});

Feedback

Let me know what do you think!
Enjoy it? Star this project! :D

Credits & Inspiration

• redux-first-routing
• react-router-redux
• connected-react-router

Contributors

See Contributors.

License

MIT License.