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>
<Link to="/login">Log
in</Link>
.
.
.
</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.