{"id":1344,"date":"2016-04-25T09:15:37","date_gmt":"2016-04-25T09:15:37","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=1344"},"modified":"2020-01-07T10:35:33","modified_gmt":"2020-01-07T10:35:33","slug":"managing-the-url-in-a-redux-app","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/managing-the-url-in-a-redux-app\/","title":{"rendered":"Managing the URL in a Redux app"},"content":{"rendered":"

Please note that this post is now out of date but we will write an updated version later in the year.<\/p>\n

Let's say you've built an awesome app in React using Redux for state management. You decide you want to add URLs to it so you can deep link to different app states (for sharing, bookmarking, etc.). You could think of the URL as just another component -- it renders something based on the current app state. With that in mind, is it easy to add URLs without significant changes to the code and in a way the fits the redux pattern? The answer is 'yes', using react-router-redux<\/a>. However, this required some investigation to figure out so we're sharing our solution here in case it's helpful.<\/p>\n

react-router-redux<\/h2>\n

With react-router-redux the location state is kept in your redux store as plain object<\/a>. This means you can inject location information with connect<\/code> as you would any other state<\/strong>. The LOCATION_CHANGE<\/code> action is dispatched when the URL changes so you can listen for this in your reducers.<\/p>\n

The location state can also be written to<\/strong>. This means you can update the URL in response to your own app's actions<\/strong> as you would any other state! Note, doing this is not quite the official API. react-router-redux creates and enhanced history<\/code> object that triggers LOCATION_CHANGE<\/code> when you, for example, call history.push(...)<\/code>. However we preferred doing this directly in our reducers: this keeps the action creators 'clean' as you don't need to convert them to, for example, thunks so you can call history.push<\/code> as well as return the usual action object.<\/p>\n

I think this is a more 'pure' redux solution. As Dan Abramov noted<\/a> in a Stack Overflow answer: \"The \u201cdefault\u201d way of doing several updates in response to something: handle it from different reducers. Most often this is what you want to do.<\/em>\"<\/p>\n

You can<\/em> dispatch multiple actions and you can<\/em> use, say, thunks to make your action creators update the URL but the cleanest, most redux way, is to update state in your reducers. That way, the the rest of the code is untouched.<\/strong><\/p>\n

A note on the naming of react-router-redux<\/h3>\n

Dan Abramov noted<\/a> this library might be better called redux-history as it does not<\/strong> require React Router. It simply allows you to keep the location state in your redux store. Additionally<\/em>\u00a0it provides utilities for integrating with React Router.<\/p>\n

The app we wanted to add URLs to didn't have the kind of nested UI that React Router is designed for. The unfortunate naming of react-router-redux meant it took a little while to realise that this was<\/em>\u00a0the library we wanted\u00a0and<\/em>\u00a0that we didn't have to use React Router.<\/p>\n

Let's look at an example app to see how it works.<\/p>\n

Maths puzzle<\/h2>\n

We'll use this little maths puzzle<\/a>.<\/p>\n

\"\"<\/p>\n

Here's the app code before we thought to add URLs (some might argue you should do this up-front. However, I mostly find it doesn't work this way. In any case, adding URLs should not require significant changes).<\/p>\n

components\/Puzzle.js<\/h3>\n