We want to modify our code so that the Redux time machine functionality will work. Let's use again the basic routing application we saw in the Adding routing with react-router section in Chapter 8, Expanding Your Application; we had routing and also a login form that dispatched some actions, so we'll be able to see (on a very small scale, agreed!) all the kinds of things we  find in a normal application.

There will be changes in two places: first, we'll have to connect our store with a history object related to the router, and, second, we'll have to add a component to our main code. The store changes are as follows—observe that we also added here our other debugging tools to match those in the rest of the chapter:

// Source file: src/routingApp/store.js

/* @flow */

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { createLogger } from "redux-logger";
import { composeWithDevTools } from "redux-devtools-extension";
import { connectRouter, routerMiddleware } from "connected-react-router";
import { createBrowserHistory } from "history";

import { reducer } from "./login.reducer";

const logger = createLogger({ duration: true });

export const history = createBrowserHistory();

export const store = createStore(
    connectRouter(history)(reducer),
    composeWithDevTools(
        applyMiddleware(routerMiddleware(history), thunk, logger)
    )
);

The code is sort of obscure-looking, but basically:

• We create a history object, which we'll have to export because we'll need it later
• We wrap our original reducer with connectRouter() to produce a new reducer that will be aware of the router state
• We add routerMiddleware(history) to allow for routing methods like push()

Then we'll have to add a <ConnectedRouter> component to our main JSX; this will require the history object that we created before:

// Source file: src/App.routing.auth.js

import React, { Component } from "react";
import { Provider } from "react-redux";
import { BrowserRouter, Switch, Route, Link } from "react-router-dom";
import { ConnectedRouter } from "connected-react-router";

import {
    ConnectedLogin,
    AuthRoute
} from "./routingApp";
import { history, store } from "./routingApp/store";

const Home = () => <h1>Home Sweet Home</h1>;
const Help = () => <h1>Help! SOS!</h1>;
.
.
.

class App extends Component<{}> {
    render() {
        return (
            <Provider store={store}>
                <BrowserRouter>
                    <ConnectedRouter history={history}>
                        <div>
                            <header>
                                <nav>
                                    <Link to="/">Home</Link>&nbsp;
                                    <Link to="/login">Log 
                                     in</Link>&nbsp;
                                    .
                                    .
                                    .
                                </nav>
                            </header>

                            <Switch>
                              <Route exact path="/" component={Home} />
                              <Route path="/help" component={Help} />
                                .
                                .
                                .
                            </Switch>
                        </div>
                    </ConnectedRouter>
                </BrowserRouter>
            </Provider>
        );
    }
}

export default App;

Everything's set now; let's see how this works.