redux-first-history

To set up the library, use createReduxHistoryContext to generate the necessary middleware and reducer. You must provide a history object (typically from the history package).

import { createStore, combineReducers, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import { createReduxHistoryContext, reachify } from "redux-first-history";
import { createWouterHook } from "redux-first-history/wouter";
import { createBrowserHistory } from 'history';

const { createReduxHistory, routerMiddleware, routerReducer } = createReduxHistoryContext({
  history: createBrowserHistory(),
});

export const store = createStore(
  combineReducers({
    router: routerReducer
    //... your reducers
  }),
  composeWithDevTools(
    applyMiddleware(routerMiddleware)
  )
);

export const history = createReduxHistory(store);

// For @reach/router support
export const reachHistory = reachify(history);

// For wouter support
export const wouterUseLocation = createWouterHook(history);

The createReduxHistoryContext function accepts an options object to configure the router behavior.

```javascript
export const createReduxHistoryContext = ({
  history, 
  routerReducerKey = 'router', 
  reduxTravelling = false, 
  selectRouterState = null,
  savePreviousLocations = 0,
  batch = null,
  reachGlobalHistory = null,
  basename
})

Use createRouterMiddleware to create a Redux middleware that synchronizes history changes with your Redux store. This middleware intercepts specific actions (of type CALL_HISTORY_METHOD) and executes the corresponding method on the provided history object (e.g., push, replace, go, etc.).

Arguments

Usage Example

import { createRouterMiddleware } from 'redux-first-history';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

const routerMiddleware = createRouterMiddleware({
  history,
  showHistoryAction: true,
  basename: '/app'
});

// Add routerMiddleware to your Redux store configuration

export const createRouterMiddleware =
   ({ history, showHistoryAction, basename }: CreateRouterMiddlewareArgs): Middleware =>
   () =>
   // @ts-ignore
   (next: Dispatch) =>
   (action: ReduxAction) => {
      // ... implementation
   };

Instead of calling the history object directly, you can dispatch Redux actions to trigger navigation. This ensures that the history state remains synchronized with your Redux store. The library provides several action creators that mirror the standard history API methods:

• push(...args): Pushes a new entry onto the history stack.
• replace(...args): Replaces the current entry on the history stack.
• go(...args): Navigates to a specific index in the history stack.
• goBack(): Navigates back one entry.
• goForward(): Navigates forward one entry.
• back(): Navigates back (compatible with history v5).
• forward(): Navigates forward (compatible with history v5).

These functions return a CallHistoryMethodAction which can be dispatched via dispatch().

import { push, replace, goBack } from 'redux-first-history';

// To navigate to a new URL:
dispatch(push('/new-path'));

// To replace the current URL:
dispatch(replace('/other-path'));

// To go back:
dispatch(goBack());

The reachify function is a utility that wraps a Redux-compatible history object (specifically one that includes a listenObject property) to make it compatible with the interface expected by Reach Router.

It provides a ReachHistory object that includes:

• navigate(to, options): A method to navigate to a new location. It returns a Promise that resolves when the transition is complete (via the internal _onTransitionComplete call).
• listen(listener): A method to subscribe to history changes.
• location: A getter for the current location.
• transitioning: A boolean indicating if a navigation transition is currently in progress.
• _onTransitionComplete(): An internal method used to signal the end of a transition, which resolves any pending navigation promises.

import { reachify } from 'redux-first-history/reachify';
// Assuming reduxHistory is your configured history object from redux-first-history
const reachHistory = reachify(reduxHistory);

// Use reachHistory with Reach Router