时间戳

首页 > 解决方案 > 如何使用 Redux Provider 包装导航堆栈（createSwitchNavigator）？

reactjs - 如何使用 Redux Provider 包装导航堆栈（createSwitchNavigator）？

问题描述

我在从我的 Settings.js 页面连接到 redux 商店时遇到问题。我得到的错误是：

“不变违规：不变违规：在“连接（设置）”的上下文中找不到“存储”。要么将根组件包装在 a 中，要么将自定义 React 上下文提供程序传递给并将相应的 React 上下文使用者传递给 Connect（设置) 在连接选项中。”

我的 SignIn.js 页面的连接方式与 Settings.js 页面的连接方式相同，但在 SignIn.js 页面工作时，设置似乎不起作用。我的根组件包含在 Provider 标记中，所以我有点迷茫。所有页面都应该可以访问 redux 存储。这可能是因为我在身份验证页面和应用程序页面之间使用了 createSwitchNavigator，或者因为我错误地导出/导入了某些内容，但我不太确定。

有任何想法吗？

相关文章：如何将 Redux 与 createSwitchNavigator 一起使用？

应用程序.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);

标签： reactjsreact-nativereduxreact-navigationreact-native-navigation

解决方案

原来是 webstorms 自动导入功能的问题。它意外导入：

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

代替：

import { connect } from 'react-redux';

上面的实现是正确的。

推荐阅读