Redux Bindings with connected-react-router

In previous chapters, we looked at how the component's state can be used to store model data and how React updates the view when the model is updated as a result of a user action. In large applications, this state information should be made available not only to the current component and its children but also to other components in the application tree. There are various state management libraries available that aid in keeping the user interface components in sync with the application state. Redux is one such library that uses a central data store to manage the state of the application. The store serves as a source of truth and the components in the application can rely on the state maintained in the store.

In this chapter, we will take a look at the connected-react-router library, which provides Redux bindings for React Router....

State management with Redux

As mentioned, Redux uses a single store to manage the state of the application. Apart from Store, there are two other building blocks: Actions and Reducers.

Let's take a look at how these building blocks help maintain state and update the view when state in Store changes.

Actions

Actions let you define the operations that the user can perform to update the state of the application. An Action is a JavaScript object of the { type, payload } shape, where type is a string mentioning the user action and payload is the data with which the state should be updated:

let todoId = 0;
export const addTodo = text => ({
    type: 'ADD_TODO'
    payload: {
        text,
        id: todoId++,
    ...

Getting started with connected-react-router

The connected-react-router library provides Redux bindings for React Router; for example, the application's history can be read from a Redux store and you can navigate to different routes in the application by dispatching actions to the store.

Let's first install connected-react-router and other libraries using npm:

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

Next, we will update the store settings.

In index.js:

import { applyMiddleware, createStore, compose } from 'redux';
import { ConnectedRouter, connectRouter, routerMiddleware } from 'connected-react-router';

const history = createBrowserHistory();

const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
    connectRouter(history)(rootReducer...

Reading state information from the Redux store

To test the preceding setup, let's first create a <Link> component in our navbar and a corresponding <Route> with the same path name:

<Link
    to={{
        pathname: '/dashboard',
        search: 'q=1',
        hash: 'test',
        state: { key: 'value' }
    }}
>
    Dashboard
</Link>
...
<Route path='/dashboard' component={Dashboard} />

Notice that the <Link> component specifies the to object with the pathname, search, hash, and state properties. We will read this information from the Redux store in our rendered component:

const Dashboard = ({ pathname, search, hash, state, count }) => {
    return (
        <div>
            <h4>In Dashboard</h4>
            <div> Pathname   : {pathname} </div>
            <div>...

Navigating by dispatching actions

The connected-react-router library provides actions that you can dispatch from your components to navigate to the routes defined in the application. These include push, replace, go, goBack, and goForward. These methods call the corresponding methods on the history object to navigate to the specified path.

The DashboardComponent in the previous example can now be updated to use mapDispatchToProps:

import {push, replace} from 'connected-react-router';

const Dashboard = ({ pathname, search, hash, state, count, push, replace }) => {    
    return (
        ...
<button onClick={() => {push('/')}}>HOME</button>
        <button onClick={() => {replace('/counter')}}>COUNTER</button>
        ...
    )
}

const mapStateToProps = state => ({
...
});

const mapDispatchToProps = dispatch => ({
    push...

Summary

In this chapter, we looked at how the Redux library can be used to create a store to manage various state entities in the application. The store receives actions and the reducers alter the state of the application when an action is dispatched. The connected-react-router library provides Redux bindings for React Router and it includes a higher-order function, connectRouter, which wraps rootReducer and creates a router state. The connectRouter function is then used in the createStore function to make the router state available to the components in the application.

The <ConnectedRouter> component in connected-react-router listens to the changes in the history location and dispatches the LOCATION_CHANGE action to update the router state property. This router state property can then be read by the rendered route component by reading the state information from the store...