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

Question

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

我们正在使用

重写我们的身份验证层

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

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

Answer 1

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

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

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

Answer 2

只有在阅读了您与 @markerikson 在 cmets 中的讨论后，我才明白您想要实现的目标。

React Navigation 文档中的 example 创建了一个上下文 AuthContext 以使其后代可以使用 auth 函数。它需要这样做，因为state 和dispatch 来自React.useReducer 钩子，所以它们只存在于组件的范围内。

您的设置有所不同，因为您使用的是 Redux。你的state 和dispatch已经通过 React-Redux 上下文提供程序对你的组件可用，并且可以通过connect、useSelector 和useDispatch 访问。 您不需要额外的上下文来存储您的身份验证信息。

您可以使用自定义挂钩处理已有的上下文。您可以创建一个使用const { signIn } = useAuth() 的设置，而不是像示例中那样使用const { signIn } = React.useContext(AuthContext)。你的 useAuth 钩子可以通过内部使用 React-Redux 钩子来访问你的 Redux 存储。

这是该代码作为钩子的样子：

import * as React from 'react';
import * as SecureStore from 'expo-secure-store';
import { useDispatch } from "react-redux";

export const useAuth = () => {
  
  // access dispatch from react-redux
  const dispatch = useDispatch();

  React.useEffect(() => {
      // same as in example
  }, []);

  // this is the same as the example too
  const authContext = useMemo(
    () => ({
      signIn: async data => {
        dispatch({ type: 'SIGN_IN', token: 'dummy-auth-token' });
      },
      signOut: () => dispatch({ type: 'SIGN_OUT' }),
      signUp: async data => {
        dispatch({ type: 'SIGN_IN', token: 'dummy-auth-token' });
      },
    }),
    []
  );

  // but instead of passing that `authContext` object to a `Provider`, just return it!
  return authContext;
}

在你的组件中，它必须在你的 React-Redux <Provider>:

function App() {
  const { signIn } = useAuth();

  const [username, setUsername] = React.useState('');

  return (
    <Button onPress={() => signIn(username)}>Sign In</Button>
  )
}