Redux Integration

/**
 * React component that connects React Router to Redux store
 * Must be rendered at the root level of your application
 */
class ConnectedRouter<S = LocationState> extends React.Component<ConnectedRouterProps<S>>;

interface ConnectedRouterProps<S = LocationState> {
  /** History instance from history package (required) */
  history: History<S>;
  /** Custom React context for react-redux (optional) */
  context?: React.Context<ReactReduxContextValue>;
  /** Skip initial location pop event (optional, default: false) */
  noInitialPop?: boolean;
  /** Disable time travel debugging in Redux DevTools (optional, default: false) */
  noTimeTravelDebugging?: boolean;
  /** Skip Router component rendering, only sync state (optional, default: false) */
  omitRouter?: boolean;
  /** Child components to render */
  children?: React.ReactNode;
}

import { createBrowserHistory } from 'history';
import { ConnectedRouter } from 'connected-react-router';

const history = createBrowserHistory();

function App() {
  return (
    <ConnectedRouter history={history}>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </ConnectedRouter>
  );
}

// With custom context for multiple stores
import { ReactReduxContext } from 'react-redux';

function App() {
  return (
    <ConnectedRouter history={history} context={ReactReduxContext}>
      {/* Your routes */}
    </ConnectedRouter>
  );
}

// Skip initial location pop for server-side rendering
function App() {
  return (
    <ConnectedRouter history={history} noInitialPop>
      {/* Your routes */}
    </ConnectedRouter>
  );
}

/**
 * Creates a Redux reducer for router state management
 * Must be mounted at the 'router' key in your root reducer
 * @param history - History instance from history package
 * @returns Redux reducer function for router state
 */
function connectRouter<S = LocationState>(history: History<S>): Reducer<RouterState<S>>;

interface RouterState<S = LocationState> {
  /** Current location with query object */
  location: RouterLocation<S>;
  /** Current navigation action type */
  action: RouterActionType;
}

interface RouterLocation<S> extends Location<S> {
  /** Parsed query parameters as object */
  query: Record<string, string>;
  /** URL pathname */
  pathname: string;
  /** URL search string */
  search: string;
  /** URL hash */
  hash: string;
  /** Navigation state */
  state?: S;
  /** Unique location key */
  key?: string;
}

type RouterActionType = 'PUSH' | 'REPLACE' | 'POP';

import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

// Create root reducer with router at 'router' key (required)
const rootReducer = combineReducers({
  router: connectRouter(history),
  user: userReducer,
  posts: postsReducer,
});

// TypeScript usage with typed state
import { History } from 'history';

interface AppState {
  title: string;
  userId: number;
}

const history: History<AppState> = createBrowserHistory();

const rootReducer = combineReducers({
  router: connectRouter<AppState>(history),
  app: appReducer,
});

/**
 * Redux middleware for intercepting router actions and calling history methods
 * Must be applied to your Redux store
 * @param history - History instance from history package
 * @returns Redux middleware function
 */
function routerMiddleware<S = LocationState>(history: History<S>): Middleware;

import { createStore, applyMiddleware } from 'redux';
import { routerMiddleware } from 'connected-react-router';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

// Apply router middleware to store
const store = createStore(
  rootReducer,
  applyMiddleware(
    routerMiddleware(history),
    // other middleware...
  )
);

// With Redux Toolkit
import { configureStore } from '@reduxjs/toolkit';

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(routerMiddleware(history)),
});

// With thunk and saga middleware
import thunk from 'redux-thunk';
import createSagaMiddleware from 'redux-saga';

const sagaMiddleware = createSagaMiddleware();

const store = createStore(
  rootReducer,
  applyMiddleware(
    routerMiddleware(history),
    thunk,
    sagaMiddleware
  )
);

/** Action type dispatched when location changes */
const LOCATION_CHANGE: '@@router/LOCATION_CHANGE';

/** Action type dispatched when history methods are called */
const CALL_HISTORY_METHOD: '@@router/CALL_HISTORY_METHOD';

/**
 * Creates a location change action (internal use)
 * @param location - New location object
 * @param action - Navigation action type
 * @param isFirstRendering - Whether this is the initial render
 * @returns Location change action
 */
function onLocationChanged<S = LocationState>(
  location: Location<S>,
  action: RouterActionType,
  isFirstRendering?: boolean
): LocationChangeAction<S>;

interface LocationChangeAction<S = LocationState> {
  type: typeof LOCATION_CHANGE;
  payload: LocationChangePayload<S>;
}

interface LocationChangePayload<S = LocationState> {
  location: RouterLocation<S>;
  action: RouterActionType;
  isFirstRendering: boolean;
}