redux-simple-router is a much more straightfoward way to sync your Redux store with React Router. This project works, too, but it's more experimental, and could be subject to significant API churn and experimentation. Please choose accordingly.
Redux bindings for React Router.
router.transitionTo(), etc. still work.
npm install --save firstname.lastname@example.org
React Router is a fantastic routing library, but one downside is that it abstracts away a very crucial piece of application state — the current route! This abstraction is super useful for route matching and rendering, but the API for interacting with the router to 1) trigger transitions and 2) react to state changes within the component lifecycle leaves something to be desired.
It turns out we already solved these problems with Flux (and Redux): We use action creators to trigger state changes, and we use higher-order components to subscribe to state changes.
This library allows you to keep your router state inside your Redux store. So getting the current pathname, query, and params is as easy as selecting any other part of your application state.
;;;;;;// Configure routes like normalconst routes =<Route path="/" component=App><Route path="parent" component=Parent><Route path="child" component=Child /><Route path="child/:id" component=Child /></Route></Route>;// Configure reducer to store state at state.router// You can store it elsewhere by specifying a custom `routerStateSelector`// in the store enhancer belowconst reducer =;// Compose reduxReactRouter with other store enhancersconst store =createStorereducer;// Elsewhere, in a component module...;;SearchBox;
redux-router will notice if the router state in your Redux store changes from an external source other than the router itself — e.g. the Redux Devtools — and trigger a transition accordingly!
A Redux store enhancer that adds router state to the store.
A reducer that keeps track of Router state.
A component that renders a React Router app using router state from a Redux store.
An action creator for
An action creator for
@joshgeller threw together a good example on how to handle user authentication via a higher order component. Check out joshgeller/react-redux-jwt-auth-example
This library pairs well with redux-rx to trigger route transitions in response to state changes. Here's a simple example of redirecting to a new page after a successful login:
const LoginPage =
A more complete example is forthcoming.