React ~ Router Redux Integration - rohit120582sharma/Documentation GitHub Wiki

Redux is an important part of the React ecosystem. We want to make the integration of React Router and Redux as seamless as possible for people wanting to use both.

Some folks want to:

  • Synchronize the routing data with, and accessed from, the store.
  • Be able to navigate by dispatching actions.
  • Have support for time travel debugging for route changes in the Redux devtools.

Installation

$ npm install --save history
$ npm install --save connected-react-router

Usage

Step 1

In your root reducer file:

  • Create a function that takes history as an argument and returns a root reducer.
  • Add router reducer into root reducer by passing history to connectRouter.
  • Note: The key MUST be router 
// reducers.js
import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router';

const createRootReducer = (history) => combineReducers({
  router: connectRouter(history),
  ... // rest of your reducers
});

export default createRootReducer;

Step 2

When creating a Redux store:

  • Create a history object.
  • Provide the created history to the root reducer creator.
  • Use routerMiddleware(history) if you want to dispatch history actions (e.g. to change URL with push('/path/to/somewhere')).
// configureStore.js
...
import { createBrowserHistory } from 'history';
import { applyMiddleware, compose, createStore } from 'redux';
import { routerMiddleware } from 'connected-react-router';

import createRootReducer from './reducers';
...

// Create a history of your choosing (we're using a browser history in this case)
export const history = createBrowserHistory();

// Create a root reducer with router state
const rootReducer = createRootReducer(history);

// Build the middleware for intercepting and dispatching navigation actions
const middlewareRouter = routerMiddleware(history);

export default function configureStore(preloadedState) {
  const store = createStore(
    rootReducer,
    preloadedState,
    compose(
      applyMiddleware(
        middlewareRouter,
        // ... other middlewares ...
      ),
    ),
  );

  return store;
}

Step 3

  • Wrap your routing with ConnectedRouter and pass the history object as a prop.
  • Place ConnectedRouter as a child of react-redux's Provider.
// index.js
...
import { Provider } from 'react-redux';
import { Route, Switch } from 'react-router';
import { ConnectedRouter } from 'connected-react-router';
import configureStore, { history } from './configureStore';
...
const store = configureStore(/* provide initial state if any */);

// Now you can dispatch navigation actions from anywhere!
// store.dispatch(push('/foo'));

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Switch>
        <Route exact path="/" render={() => (<div>Match</div>)} />
        <Route render={() => (<div>Miss</div>)} />
      </Switch>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('react-root')
);

⚠️ **GitHub.com Fallback** ⚠️