Nested Navigators in Redux

Hello,

I’m trying to set up a TabNavigator inside a StackedNavigator, sort of like this:

TabsNavigator = TabNavigator({
            HomeScreen: {
                screen: HomeScreen,
                navigationOptions: {
                    tabBar: () => ({
                        label: 'Home'
                    })
                }
            },
            MyAction: {
                screen: Settings,
                navigationOptions: {
                    tabBar: () => ({
                        label: 'Settings'
                    })
                }
            },
        }, {
            tabBarPosition: 'bottom',
            animationEnabled: true,
            swipeEnabled: true
        });
        ModalNavigator = StackNavigator({
            Home: {
                screen: TabsNavigator
            }
        });

My issue is, since I’m using Redux, I can pass the outer StackedNavigator the nav state easily enough:

import { ModalNavigator } from '../scenes';
const AppNavigatorWithRedux = connect()(ModalNavigator);
<AppNavigatorWithRedux
         navigation={navigation}
/>

But I don’t know how to pass the TabNavigator’s state down to it. I’m assuming right now I’m going to have to wrap it in another component and get my other navigation state, but is there another/simpler way?

My reducer is:

import { ModalNavigator, TabsNavigator } from '../scenes';
const navReducer = (state, action) => {
    return {
        ModalNavigator: ModalNavigator.router.getStateForAction(action, state),
        TabNavigator: TabNavigator.router.getStateForAction(action, state)
    };
};

const appReducer = combineReducers({
    navReducer,
    mainReducer
});