React - redux or local state for different navigation levels

Question

I'm making a really simple application with react native and redux. I'm wondering, how I should manage the state, especially for navigation. I know this is a highly opinion-based question, but I believe this to be critical for my understanding of redux. The navigation structure is like this:

                                app                          
                            /    |   \
                  role1View    login   role2View
                 /        \
          formView        logView
          /      \
  formPage1     formPage2

Things to consider in navigation:

• There are 3 top level views: login, role1View and role2View. The correct view is selected based on login role. It should be possible to navigate to these views also from sub views, so I'm planning to keep this route information in redux.
• role1View has 2 tabs: formView (default) and logView. It should not be possible to navigate to these views directly, but only through UI by using tabs. Tabs are not changed programmatically.
• formPage1 (default) and formPage2 are sub views on formView tab. FormPage2 needs data saved on formPage1, but when tab is changed, the form data should be forgotten.
• FormPage1 makes a webRequest, and based on the request, may redirect to formPage2. Because of this, the form has to show a loader and keep track of the request state. If tab is changed while a request is in the process, the request should be abandoned. This might be more difficult to do, if the request state is in redux.

So the question is, should I store in redux or local state

• Routes. I think I'd store the main route in redux and others in local state.
• Form data. I'm considering storing this to the local state of formView.
• Form UI state. Maybe local state in formPage1?

UPDATE, EXTRA QUESTION:

There's a need to add up-navigation (arrow in top left corner) from formPage2 to formPage1. Android toolbar is defined on a higher level (app), and up button visibility is stored to redux. How/where should I handle up button click?

Answer 1

I think this response from Mr. Redux himself, still applies as best practice here: https://github.com/reactjs/redux/issues/1287#issuecomment-175351978

Use React for ephemeral state that doesn't matter to the app globally and doesn't mutate in complex ways. For example, a toggle in some UI element, a form input state. Use Redux for state that matters globally or is mutated in complex ways. For example, cached users, or a post draft.

So generally, if the state is relevant only to one parent component and one or two levels down from there, it is probably best kept local. If the state can be touched by siblings of that parent component or others that are higher up or elsewhere in the app, it's likely a good candidate for Redux.

Relating this back to your app, I think you already have the right ideas. Especially when views are fine losing their state upon navigation, there's really no point keeping that state in a global store.

Routes tend to be a global concern, which is why react-router-redux is quite popular, to keep route state in the redux store. However, since your tabs are not supposed to be accessible globally (unless this might change in the future?), it's still cleaner to keep that route state locally, I'd say.