How to wrap navigation stack (createSwitchNavigator) with Redux Provider?

Question

I'm having an issue connecting to the redux store from my Settings.js page. The error I'm getting is:

"Invariant Violation: Invariant Violation: Could not find "store" in the context of "Connect(Settings)". Either wrap the root component in a , or pass a custom React context provider to and the corresponding React context consumer to Connect(Settings) in connect options."

My SignIn.js page is connected the same way as the Settings.js page but the settings one does not seem to work while the SignIn.js page does work. My root component is wrapped in a Provider tag so I'm a bit lost. All pages should have access to the redux store. This might be because I'm using createSwitchNavigator between the authentication pages and app pages, or because I'm exporting/importing something incorrectly but I'm not too sure.

Any ideas?

Related Post: how to use Redux with createSwitchNavigator?

App.js

export default class App extends React.Component {
    render() {
        const authStack = createStackNavigator({
            Onboarding: { screen: Onboarding },
            SignUp: { screen: SignUp },
            SignIn: { screen: SignIn },
        });

        const appStack = createBottomTabNavigator({
           Home: { screen: Home },
           Profile: { screen: Profile },
           Settings: { screen: Settings }
        });


        const Navigation = createAppContainer(createSwitchNavigator(
            {
                AuthLoading: AuthLoad,
                App: appStack,
                Auth: authStack,
            },
            {
                initialRouteName: 'AuthLoading',
            }
        ));

        return (
            <Provider store={store}>
                <Navigation/>
            </Provider>
        );
    }
}

Settings.js [Not working]

class Settings extends Component {
    render() {
        return (
            <View>
                <Text>Settings Page</Text>
            </View>
        )
    }
}

const mapStateToProps = state => ({
    phone: state.user.phone,
});

export default connect(mapStateToProps)(Settings);

SignIn.js [Working]

class SignIn extends Component {
    render () {
       return (
           <View>
               <Text>SignIn Page</Text>
           </View>
       )
    }
}

const mapStateToProps = state => ({
    phone: state.user.phone,
});


export default connect(mapStateToProps)(SignIn);

calezu calezu · Accepted Answer · 2019-06-07T19:48:36

It turned out to be an issue with webstorms auto import feature. It accidentally imported:

import connect from "react-redux/es/connect/connect";

Instead of:

import { connect } from 'react-redux';

The above implementation is correct.

How to wrap navigation stack (createSwitchNavigator) with Redux Provider?

1 Answers