How to organize state with redux and react-router?

Question

Redux advocates the use of a single store with a single state. However, with react-router you get multiple pages each having their own top-level root component.

How should one go about wiring up redux with a react-router app that has multiple pages? React-router 1.0 no longer lets you pass props to the routes so making the router the top level component that contains the state for all the pages is no longer possible nor is it feasible.

Answer 1

If you are using redux + react-router I would highly recommend using redux-router as well - this will allow you to keep route information in your store - I usually have the following setup.

redux-router: ^1.0.0-beta3 / react-router": ^1.0.0-rc1 / redux: "^3.0.2 / react: "^0.14.0

//index.js [entry point]

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route } from 'react-router';
import { Provider } from 'react-redux';
import createStore from './utils/create-store';
import routes from './bootstrap/routes';
import { ReduxRouter } from 'redux-router';

const store = createStore(routes);

ReactDOM.render(
    <Provider store={store}>
        <ReduxRouter>
            {routes}
        </ReduxRouter>
    </Provider>,
    document.getElementById('root')
);

// create-store.js

import { applyMiddleware, createStore, combineReducers, compose } from 'redux';
import * as reducers from '../reducers/index';
import promiseMiddleware from './promise-middleware';
import { routerStateReducer, reduxReactRouter } from 'redux-router';
import history from './history'

/**
 * Sets up the redux store.  Responsible for loading up the reducers and middleware.
 *
 * @param routes
 */
export default function create(routes) {
    const composedReducers = combineReducers({
        router: routerStateReducer,
        ...reducers
    });
    const finalCreateStore = compose(applyMiddleware(promiseMiddleware),
        reduxReactRouter({
            routes,
            history
        }))(createStore);
    let store = finalCreateStore(composedReducers);
    return store;
}

// routes.js

import React from 'react';
import { Route } from 'react-router';
import  App from './app';

module.exports = (
    <Route component={App}>
        ...all your routes go here
    </Route>
);

// app.js

import React, { PropTypes } from 'react';
import { connect } from 'react-redux';

export default class App extends React.Component {

    render() {
        const { props: { children } } = this;
        return (
            <div className="app-container">
              {children}
            </div>
        );
    }
}

So as you can see there is one higher order component that wraps the rest of your routes