Stack Navigator reducer not initializing correctly

[dereknelson]

Current Behavior

I am trying to merge redux with my navigation state. I have a stack navigator that returns a tab navigator. I have followed the new react navigation redux guide, but when I try to import the navigator reducer as part of my combine reducers, it throws me "No reducer provided for key navigation." I tracked the issue down and it appears to be doing things out of order: initial console log, timed out console log.

Expected Behavior

The reducer should initialize with the defined router and not be throwing this error.

How to reproduce

https://gist.github.com/prodigynelson/d05cfed480730be06b381c7385c3e488

Your Environment

software	version
react-navigation	1.0.0-beta.19
react-native	.50

[dereknelson]

related issue: react-navigation/react-navigation#1919 (comment)

[Ashoat]

@prodigynelson what's going on here is that you have two different navigation states, but the middleware is only set up to track one of them. What's more is that you've set up that middleware to alert listeners in both of the navigators whenever the tracked navigation state is updated, whereas the non-tracked navigation state is just ignored.

I myself haven't tested the hot-swapping navigation state approach you're taking here. Theoretically I think it should be possible, as when a navigation prop is specified to a navigator it becomes "stateless". That said, I don't think this approach is advisable. Bifurcating your state like this prevents you from building a more native log-in experience, ie. with animations. You could achieve the same by nesting your whole app into a StackNavigator, that has gesturesEnabled: false, and then navigate-ing to log-in by pushing your app onto the stack. You can then pick between a fading-in animation, a stack-pushing animation, or simply disable the animation to get the experience you have now. Either way you'll want to disable the root StackNavigator's header.

cc @brentvatne who I think has been working on a guide for how to implement log-in flows

If you're set on the hot-swapping approach, you're going to need to set up two different, distinct middleware (with different keys) to track either state tree individually.