Как обернуть стек навигации (createSwitchNavigator) с провайдером Redux?

Question

У меня проблема с подключением к хранилищу редуксов со страницы Settings.js. Я получаю ошибку:

«Нарушение инварианта: Нарушение инварианта: не удалось найти« хранилище »в контексте« Соединения (параметры) ». Либо оберните корневой компонент в объекте, либо передайте пользовательский поставщик контекста React и соответствующий получатель контекста React Подключиться (Настройки) в настройках подключения. "

Моя страница SignIn.js подключена так же, как и страница Settings.js, но настройки, похоже, не работают, пока страница SignIn.js работает. Мой корневой компонент обернут в тег провайдера, поэтому я немного растерялся. Все страницы должны иметь доступ к магазину редуксов. Это может быть связано с тем, что я использую createSwitchNavigator между страницами аутентификации и страницами приложения, или потому что я неправильно экспортирую / импортирую что-то, но я не слишком уверен.

Есть идеи?

Related Post: как использовать Redux с 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 [Не работает]

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 [Работает]

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

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


export default connect(mapStateToProps)(SignIn);

Answer 1

Оказалось, что проблема с функцией автоматического импорта веб-штормов.Он случайно импортировал:

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

Вместо:

import { connect } from 'react-redux';

Вышеприведенная реализация верна.