React Router Redux Tutorial

In this tutorial we'll look at how to use react-router-redux (previously known as redux-simple-router) to control the URL as a part of the application state.

If you are using Redux to manage the application state and the React Router to add routing between components then you might had some situations where you wanted to keep the URL state in sync with the Redux store? The react-router-redux library does exactly that.

The library works by keeping a copy of the location information hidden inside the Redux state which will come handy when you manipulate (rewind, reset or replay etc.) your application state with tools such as Redux DevTools as the library will make sure to propagate all updates to the React Router (which will update the components tree accordingly).

Please note that, you don't want to use this library if you only need to use both Redux and the React Router in your application to handle global state and routing as the two libraries can be used together without any problems and without using any extra libraries. You only need this library if you need to record user actions and rewind/replay them but in sync with the React Router.

Generate a React Application

If you don't have Create React App installed, first run the following command to install it from npm:

npm install -g create-react-app

Next, let's create a new React application:

create-react-app react-redux-router-demo

How to Use react-router-redux?

After generating a React application, you need to install Redux, React Redux bindings and React Router DOM from npm:

cd react-redux-router-demo
npm install --save redux react-redux react-router-dom

Next, you need to install react-router-redux from npm using:

npm install --save react-router-redux
Note: We also publish our tutorials on Medium and If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub

Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.

comments powered by Disqus Protection Status