How to organize redux with react-router?

[ramin32]

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.

A simple example would be appreciated.

[gaearon]

examples/real-world uses React Router through Redux Router.
This is the approach we recommend.
See also #637 for discussion.

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.

Having just one connected root component is overkill anyway. Connecting route handlers is perfectly reasonable from performance and other standpoints. You still have one store. Please see #419 for discussion.

[ramin32]

@gaearon, I am new with redux, but I am assuming by "connected" you mean doing something like store.subscribe(...) inside of the component.

When I subscribe inside of the top level component that renders that particular page, do I simply set the state of that component with a subtree of the store state?

For example:

appState = {
   user: {...},
   posts: [],
   messages: []
}

in PostsComponent I would do:

var PostComponent = React.createClass({
   componentDidMount: function () {
       store.subscribe(() =>
          this.setState({posts: store.getState().posts})
      );
   }
   ...
});

[gaearon]

You could do this, but React Redux is more efficient so you should use it instead.