React-Redux状态管理下APP按用户状态切换认证/正常界面的问题

你在RootLayout组件中直接调用useSelector，但该组件本身并没有被Redux的Provider包裹——Provider是在RootLayout的return语句里才渲染的，导致useSelector执行时无法找到Redux上下文，触发could not find react-redux context value错误。

将需要访问Redux状态的导航逻辑抽成独立子组件，让这个子组件处于Provider的上下文范围内。具体修改如下：

1. 新建一个AppNavigator组件，在内部使用useSelector判断用户状态并渲染对应导航
2. 在RootLayout的Provider内部渲染这个AppNavigator

修改后的完整代码：

import {
  DarkTheme,
  DefaultTheme,
  ThemeProvider,
} from "@react-navigation/native";
import { useFonts } from "expo-font";
import { Stack } from "expo-router";
import { Drawer } from "expo-router/drawer";
import * as SplashScreen from "expo-splash-screen";
import { StatusBar } from "expo-status-bar";
import { useEffect } from "react";
import "react-native-reanimated";
import { useColorScheme } from "@/hooks/useColorScheme";
import { selectCurrentUser } from "@/store/auth/authSlice";
import { useSelector } from "react-redux";
import "react-native-gesture-handler";
import { Provider } from "react-redux";
import store from "../store/store";

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

// 抽离的导航组件，在Provider内部，可正常访问Redux状态
function AppNavigator() {
  const currentUser = useSelector(selectCurrentUser);
  const colorScheme = useColorScheme();

  return (
    <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
      {currentUser ? (
        <Drawer>
          <Drawer.Screen name="(tabs)" options={{ headerShown: false }} />
          <Drawer.Screen name="+not-found" />
        </Drawer>
      ) : (
        <Stack>
          <Stack.Screen
            name="(authentication)"
            options={{ headerShown: false }}
          />
        </Stack>
      )}
      <StatusBar style="auto" />
    </ThemeProvider>
  );
}

export default function RootLayout() {
  const [loaded] = useFonts({
    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
  });

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  // Provider包裹AppNavigator，确保子组件能访问Redux上下文
  return (
    <Provider store={store}>
      <AppNavigator />
    </Provider>
  );
}

• RootLayout只负责字体加载、启动屏控制这些全局初始化逻辑，不直接访问Redux状态
• AppNavigator作为Provider的子组件，处于Redux上下文范围内，可以正常使用useSelector获取用户状态
• 这样既保留了原来的功能逻辑，又解决了上下文缺失的问题

内容的提问来源于stack exchange，提问作者Wagner Gauer