时间戳

首页 > 解决方案 > 在“Connect(HomeScreen)”的上下文中找不到“store”。将根组件包装在...中或传递自定义的 React 上下文提供程序

react-native - 在“Connect(HomeScreen)”的上下文中找不到“store”。将根组件包装在...中或传递自定义的 React 上下文提供程序

问题描述

检查许多已经问过的问题，但仍然无法弄清楚这一点。

我们正在使用重写我们的身份验证层

export default AuthContext = React.createContext();

并将它包裹在我们的 AppNavigator 周围

function AppNavigator(props) {
  const [state, dispatch] = useReducer(accountReducer, INITIAL_STATE);
  const authContext = React.useMemo(
    () => ({
      loadUser: async () => {
        const token = await keychainStorage.getItem("token");

        if (token) {
          await dispatch({ type: SIGN_IN_SUCCESS, token: token });
        }
  },

  signIn: async (data) => {
    client
      .post(LOGIN_CUSTOMER_RESOURCE, data)
      .then((res) => {
        const token = res.data.accessToken;
        keychainStorage.setItem("token", token);

        dispatch({ type: SIGN_IN_SUCCESS, token: token });
      })
      .catch((x) => {
        dispatch({ type: SIGN_IN_FAIL  });
      });
  },

  signOut: () => {
    client.delete({
          LOGOUT_CUSTOMER_RESOURCE
        });

        dispatch({ type: SIGN_OUT_SUCCESS });
      }
    }),
    []
  );
  console.log("token start", state.token);
  return (
    <AuthContext.Provider value={authContext}>
      <NavigationContainer
        theme={MyTheme}
        ref={(navigatorRef) => {
          NavigationService.setTopLevelNavigator(navigatorRef);
        }}
        onStateChange={(state) => {
          NavigationService.setAnalytics(state);
        }}
      >
        <AppStack.Navigator initialRouteName="App" screenOptions={hideHeader}>
          {state.token != null ? (
            <AppStack.Screen name="App" component={AuthMainTabNavigator} />
          ) : (
            <>
              <AppStack.Screen name="App" component={MainTabNavigator} />
              <AppStack.Screen name="Auth" component={AuthNavigator} />
            </>
          )}
        </AppStack.Navigator>
      </NavigationContainer>
    </AuthContext.Provider>
  );
}

export default AppNavigator;

App.js - 渲染功能

 <Root>
      <StoreProvider store={store} context={AuthContext}>
        <PersistGate loading={null} persistor={persistor}>
          <SafeAreaProvider>
                <AppNavigator  context={AuthContext}/>
          </SafeAreaProvider>
        </PersistGate>
      </StoreProvider>
    </Root>

HomeScreen.js

export default connect(mapStateToProps, mapDispatchToProps, null, { context: AuthContext })(HomeScreen);

但仍然收到

Error: Could not find "store" in the context of "Connect(HomeScreen)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(HomeScreen) in connect options.

我们浏览了 REDUX 文档：

https://react-redux.js.org/using-react-redux/accessing-store#using-the-usestore-hook

根本无法弄清楚为什么我们会收到此错误。

标签： react-nativereduxreact-redux

解决方案

我不确定您要在这里完成什么，但这是非常错误的：

export default connect(mapStateToProps, mapDispatchToProps, null, { context: AuthContext })(HomeScreen);

看起来你把两种不同的东西混在一起了。您正在尝试创建一个与您自己的身份验证状态一起使用的上下文，但您也在尝试使用相同的上下文实例来覆盖 React-Redux 自己的默认上下文实例。 不要那样做！除非在极少数情况下，否则 不应将自定义上下文实例传递给connect和。<Provider>

推荐阅读