React + Redux + Router - should I use one state/store for all pages/components?

Question

I am using React + Redux, and after reading about react-router-redux and redux-router, and after reading Dan Abramov's answer, I decided to use "vanilla" react-router (I don't care about time travel etc. at this point).

The only open question left is how to handle state across different routes. Each route sub-tree can be a different and independent section in my application (especially when it become bigger). Is it still a good practice to have one store to handle all routes/ pages? Shouldn't I (at least) have a different store/state for each main route path?

I think routes should be some kind of stateless and independent, meaning that if I go directly to one of my links, it should work, and won't be aware of other sibling routes. Should I reflect it to my store?

Edit

After some more thinking, I guess that using different reducers + "CombineReducers" will do the trick. The only thing left to for me to verify is that state of former routes does not persist while navigating

Answer 1

On of the possible solutions to verify that state of former routes does not persist:

Top level components in each route are mounting and unmounting when user navigates between pages. You can use their lifecycle methods to send any redux events to clean your state.

For example send CLEAN_STATE from componentWillUnmount. You should catch this event in your top level reducer end return initial state from it. To do it you can manually call all nested reducers with undefined as a state parameter. In that case each reducer will return it's initial state.