React Native使用React Navigation+Redux无法触发条件重渲染问题

• 核心问题：StackNavigator 组件未订阅 Redux 状态变更，直接调用 store.getState() 只会在组件初始化时一次性读取状态值，后续 Redux 状态更新不会触发组件重渲染，所以路由判断逻辑不会重新执行。
• 次关键问题：StackNavigator 中的 useEffect 未添加依赖数组，会在每次组件渲染时重复执行存储读取逻辑，容易引发状态冲突。
• 潜在问题：配置 Store 时注释了 RTK Query 对应的 reducer 和中间件，会导致 authApi 相关的请求回调、状态同步逻辑无法正常运行。

1. 修复 store.ts 配置 #

把注释掉的 RTK Query 配置补全，保证 authApi 功能正常：

const store = configureStore({
    reducer: {
        authSlice: authSlice,
        [authApi.reducerPath]: authApi.reducer // 补全authApi的reducer
    },
    middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware().concat(authApi.middleware), // 补全authApi的中间件
})

2. 重写 StackNavigator 逻辑 #

用 useSelector 订阅 Redux 状态，移除冗余的本地状态，给 useEffect 加空依赖：

import { useSelector } from 'react-redux'
import { RootState } from '../redux/store' // 改成你实际的导入路径

const Stack = createNativeStackNavigator();

const getData = async () => {
    try {
      const jsonValue = await AsyncStorage.getItem('logged_in_user')
      return jsonValue != null ? JSON.parse(jsonValue) : null;
    } catch(e) {
      // 读取错误处理
    }
}

export default function StackNavigator() {
    const dispatch = useAppDispatch();
    const authToken = useSelector((state: RootState) => state.authSlice.authToken) // 订阅authToken变化
    const [isLoading, setIsLoading] = useState(true);

    useEffect( () => {
      getData().then(res => {
        if(res !== null) {
          dispatch(authSlice.actions.setAuthToken(res.auth_token));
        }
        setIsLoading(false);
      }).catch(err => {
        console.log(err);
        setIsLoading(false);
      })
    }, [dispatch]) // 加依赖数组，只在组件挂载时执行一次

    if(isLoading) {
        return <FirstScreen></FirstScreen>
    } else {
    return (
      <Stack.Navigator>
      <>
      {
        authToken !== '' ?
             <Stack.Screen name = "Drawer" component={DrawerNavigator} options = {{headerShown : false}}></Stack.Screen> :
             <>  
           <Stack.Screen name = "Login" component = {LoginScreen} options={{headerShown : false}} ></Stack.Screen>
         <Stack.Screen name = "ForgotPassword" component = {ForgotPasswordScreen} options = {{headerShown : false}}></Stack.Screen>
        </>
      }
         
      </>
      </Stack.Navigator>
    );
    }
}

修复后，当你登录成功 dispatch 更新 authToken 时，useSelector 会检测到状态变更，触发 StackNavigator 重渲染，自动命中路由判断逻辑跳转到 Drawer 导航，不需要手动刷新应用。

内容的提问来源于stack exchange，提问作者aneesh kapur