React Native Expo创建App组件包装器后无法访问Redux Store问题排查

• 未正确修改项目入口配置
  你创建了自定义入口EntryPoint.js后，没有修改package.json中的main字段指向该文件，Expo默认仍会加载App.js作为根组件执行。此时App组件内直接调用useSelector时外层没有包裹Provider，自然抛出上下文找不到的错误。
  正确操作：将package.json中的main字段修改为你EntryPoint.js的相对路径，示例：

{
  "main": "./EntryPoint.js"
}

注意确认EntryPoint.js的路径和package.json中配置的路径完全一致，相对路径要以项目根目录为基准。修改完成后执行npx expo start --clear清除缓存重启开发服务即可生效。

• 冗余代码（非报错原因）：App.js中导入了Provider但未使用，可以直接删除该行冗余导入。

不需要额外自定义入口文件，直接将Provider和PersistGate逻辑移入App.js即可，避免修改入口带来的配置成本，注意：Redux hooks只能在Provider包裹的子组件内调用，不能直接在定义Provider的根组件内调用，所以需要拆分逻辑到子组件，示例代码如下：

import React, { useState, useEffect } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { useFonts } from "expo-font";
import AppLoading from "expo-app-loading";
import { Provider, useDispatch, useSelector } from "react-redux";
import { store, persistor } from "./src/state/store";
import { PersistGate } from "redux-persist/es/integration/react";

//Layout
import Auth from "./src/layout/Auth.layout";
import Register from "./src/layout/Register.layout";
import Drawer from "./src/navigation/Drawer";

// 业务逻辑拆分到子组件，可正常调用Redux hooks
function AppContent() {
  const Stack = createStackNavigator();
  const { isLoggedIn } = useSelector((state) => state.user);
  const [isLoading, setIsLoading] = useState(false);

  let [fontsLoaded] = useFonts({
    DMSans: require("./assets/fonts/DMSans-Regular.ttf"),
    "DMSans-Medium": require("./assets/fonts/DMSans-Medium.ttf"),
    "DMSans-Bold": require("./assets/fonts/DMSans-Bold.ttf"),
  });

  if (!fontsLoaded || isLoading) {
    return <AppLoading />;
  } else {
    return (
      <NavigationContainer>
        {!isLoggedIn ? (
          <Stack.Navigator
            initialRouteName="Auth"
            screenOptions={{ headerShown: false }}
          >
            <Stack.Screen name="Auth" component={Auth} />
            <Stack.Screen name="Register" component={Register} />
          </Stack.Navigator>
        ) : (
          <Drawer />
        )}
      </NavigationContainer>
    );
  }
}

// 根组件仅做Provider包裹逻辑
export default function App() {
  return (
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <AppContent />
      </PersistGate>
    </Provider>
  )
}

这个方案不需要修改package.json入口配置，更符合常规React项目的结构，也降低了配置出错的概率。

内容的提问来源于stack exchange，提问作者Bagus Amrullah Fikri