redux-router
Redux bindings for React Router that keep router state inside the Redux store.
What is redux-router?
Redux Router is a library that integrates React Router with Redux by storing the router's state—including the current route, params, and query—inside the Redux store. It solves the problem of managing routing state separately from application state, allowing developers to interact with navigation using Redux action creators and selectors. This approach ensures that routing data is consistent and accessible throughout the Redux-powered application.
Developers building React applications with Redux who want to centralize routing state within their Redux store for unified state management and debugging. It's particularly useful for teams already invested in Redux patterns and seeking tighter integration between navigation and application logic.
Redux Router offers a seamless integration where router state is fully synchronized with the Redux store, eliminating race conditions between router props and store data. Unlike alternatives, it provides direct access to route params from the store and supports hot-swapping routes, making it ideal for complex applications requiring precise control over routing state.
Overview
Redux bindings for React Router – keep your router state inside your Redux store
Use Cases
Best For
- Applications where routing state needs to be serialized and deserialized alongside Redux state
- Debugging routing transitions with Redux DevTools time-travel features
- Projects requiring server-side rendering with synchronized router state
- Teams using Redux who prefer action-based navigation over direct React Router API calls
- Complex apps that need to access route params from the Redux store in deeply nested components
- Implementing authentication flows where navigation decisions are based on Redux state
Not Ideal For
- Projects using React Router v4 or higher, due to API incompatibilities and lack of updates for newer versions
- Applications where full state serializability is critical for debugging or persistence tools
- Teams prioritizing community support and stable, widely-adopted solutions over experimental libraries
Pros & Cons
Pros
Stores the entire React Router state—including params and queries—in the Redux store, ensuring consistency between router data and component props, as highlighted in the 'Why' section of the README.
Enables time-travel debugging and automatically triggers transitions when router state changes externally, making it ideal for complex debugging scenarios, as noted in the 'Works with Redux Devtools' section.
Provides Redux action creators like push and replace for programmatic navigation, aligning with Redux patterns and allowing predictable state management, demonstrated in the API examples.
Includes examples for server-rendered applications, facilitating universal JavaScript setups by synchronizing router state between client and server, as mentioned in the example directory.
Cons
The README explicitly states 'This project is experimental' and recommends using React Router directly or react-router-redux, indicating limited support and potential abandonment.
Router data includes non-serializable components and functions, causing problems with DevTools extensions and state persistence libraries, as admitted in the 'Differences with react-router-redux' section.
Requires custom store enhancers and has a different top-level API compared to standard React Router, adding setup overhead and potential upgrade delays, as noted in the limitations.
Frequently Asked Questions
Related Projects
react-router-reduxRuthlessly simple bindings to keep react-router and redux in sync
redux-async-connectIt allows you to request async data, store them in redux state and connect them to your react component.
ground-controlScalable reducer management & powerful data fetching for React Router & Redux.
redux-tiny-routerA Router made for Redux and made for universal apps! stop using the router as a controller... its just state!
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.