Question

从我的Settings.js页面连接到Redux存储时遇到问题。我收到的错误是：

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

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

有什么想法吗？

相关帖子：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 [不起作用]

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

原来是webstorms自动导入功能存在问题。它不小心导入了：

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

代替：

import { connect } from 'react-redux';

以上实现是正确的。

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

1 个答案: