Docs: Usage with React Router

[gaearon]

People constantly get the impression we don't support React Router, or that you need something special like redux-react-router for it to work, or even that it doesn't work until React 0.14.

You can use Redux with React Router 0.13 or 1.0 as is today.
(And that was true since Redux's initial release by the way.)

Some features like time travel will need to wait for some support on RR side, but this is irrelevant to the main issue. People get confused thinking they can't use routing today, which is just wrong.

The real world example included in this repo uses React Router. All you need is to wrap <Router> into <Provider>, just like you'd wrap your top-level component in a router-less app.

If you want to transition from action creators, pass router instance as a parameter to action creators, and call its methods when you like. If you want to read router state from Redux store, fire an action on route change and write a reducer to handle it. That's it!

react-redux-router is an experiment in trying to come up with a more natural API where you'd just dispatch actions and read state from store which automagically is connected to the router instance, but you don't have to use it, or to wait for it to become stable! It's an experiment only.

We need this in docs..

[hedgerh]

I had originally wrote the server side rendering example to use react router in a universal context. It was suggested that usage with react router could become a document of its own. Perhaps we could add a section to the documentation?

[hedgerh]

Also, how do you feel about adding an example that shows react router being universally used?

[timdorr]

I think modifying the real-world example to be universal would be a good idea. That way you don't have to build anything from scratch.

[kolodny]

If you want to transition from action creators, pass router instance as a parameter to action creators

Just wanted to clarify, this only works in 0.13 as 1.0beta doesn't have a createRouter concept (yet?), correct?

[timdorr]

You can do it with 1.0.0-beta3 from within your React components.

class Thing extends Component {
  static contextTypes = {
    router: PropTypes.object
  }

  handleThing() {
    this.props.actionCreator(this.context.router);
  }
}

[kolodny]

@timdorr Is it safe to use this.context ? I was under the impression that it wasn't meant to be used externally.

[timdorr]

Yes, it's just undocumented, not unsafe. It's getting changed slightly in 0.14, but not in a way that would break this. I imagine it will be documented at some point soon.

[kolodny]

@timdorr Does that also mean it's possible to transition to a different url from an action creator in 1.0.0-beta3 ?

[timdorr]

Yes, if you pass along the router instance to the action creator, you can do whatever you want with it, including transitions.

[kolodny]

I threw together this:

const loginProps = {
  handleLogin: ({email, password}) => store.dispatch(userLogin({email, password})),
};



const routes = (
  <Route path="/" handler={App}>
    <Route path="login" handler={wrapper(Login, loginProps)} />
    <Route handler={authSection}>
      <Route path="" handler={Index} />
      <Route path="users" handler={wrapper(Users, (() => store.dispatch(getUsers())))} />
      <Route path="logout" handler={wrapper(Login, (() => store.dispatch(userLogout())))} />
    </Route>
  </Route>
);

const router = createRouter({
  location: HistoryLocation,
  routes,
});

store.dispatch(receiveRouter({router}));

[gyzerok]

Warning: Failed Context Types: Required context `store` was not specified in `SmartComponent(TodoApp)`. Check the render method of `Router`.

What's may be wrong?

P.S.: RR 1.0.0-beta3

[gaearon]

@gyzerok Make sure you wrap the whole () => <Router>stuff</Router> into <Provider>, just like real-world example does it.

[gyzerok]

@gaearon yes, ofc. I wrap it not in Provider but in my own component which is mostly copy-paste of your Provider. The difference is I do not pass store to it, but create store inside of it.

[gaearon]

@gyzerok It's hard to say what's wrong without seeing the code. (And please file a separate issue, react-redux repo is a good place.)