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

Question

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

“不变违规:不变违规:在“Connect(Settings)”上下文中找不到“store”。要么将根组件包装在 a 中，要么将自定义 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';

上述实现是正确的。