Expo React Native RBAC登录系统Redux上下文缺失错误求助

没错，这个Redux错误完全是由index.js里的App注册方式导致的，我来帮你拆解问题并给出修复方案：

核心问题：Expo注册逻辑与Redux Provider的冲突 #

你现在在index.js里同时用了两种不同的根组件注册方式：

1. ReactDOM.render：这是Web项目（比如Create React App）的写法，你在这里正确地把App包裹在了Redux的<Provider>里
2. registerRootComponent(App)：这是Expo/React Native项目的标准注册方式，但你直接传了未被Provider包裹的App，这就导致Expo实际渲染的App组件没有Redux上下文，所以Connect(App)找不到store

Expo的registerRootComponent会覆盖ReactDOM.render的效果（在Native环境下完全忽略ReactDOM），所以你的Provider相当于白加了。

修复方案：统一用registerRootComponent包裹带Provider的组件 #

把index.js的代码改成这样：

import { registerRootComponent } from "expo";
import React from "react";
import { Provider } from "react-redux";
import store from "./store";
import "./index.css";
import App from "./App";

// 把Provider和App整合成一个组件，再传给registerRootComponent
const Root = () => (
  <Provider store={store}>
    <App />
  </Provider>
);

registerRootComponent(Root);

这样Expo渲染的根组件就包含了Redux Provider，Connect(App)就能正常获取store上下文了。

额外需要修复的App.js小问题 #

除了index.js的问题，你的App.js里还有几个小bug会导致后续运行出错：

• 拼写错误：导入的useDespatch应该是useDispatch（虽然你在Class组件里没用到，但还是建议修正）
• action调用错误：logOut方法里的this.props.dispatch(logout())应该改成this.props.dispatch(logOut())（你的action是logOut，不是logout）
• 未定义变量：渲染里的state.userToken没有定义，应该用你已经在state里维护的currentUser来判断登录状态
• 组件命名不统一：你导入的是home，但渲染里用的是HomePage，需要统一组件名（比如改成import HomePage from './screens/home'）
• 无用依赖：你导入了react-router-dom的组件，但用的是React Navigation，这些依赖可以删除，避免混淆

修正后的App.js关键部分示例：

// 修正导入
import { connect } from "react-redux"; // 删掉没用的useDispatch、useSelector、Provider
// 统一组件导入
import { LoginScreen, HomePage, RegistrationScreen } from './screens';

// 修正logOut方法
logOut() {
  this.props.dispatch(logOut()); // 这里用logOut，和action名称一致
}

// 修正render里的条件判断
render() {
  const { currentUser } = this.state;
  return (
    <NavigationContainer>
      <Stack.Navigator>
        {!currentUser ? ( // 用currentUser判断登录状态
          <> 
            <Stack.Screen name="Login" component={LoginScreen}/>
            <Stack.Screen name="Registration" component={RegistrationScreen}/>
          </>
        ) : (
          <> 
            <Stack.Screen name="Homepage" component={HomePage} options={{ header: () => <HeaderMenu headerDisplay="Home page"/> }} />
            {/* 其他已登录后的屏幕 */}
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

总结 #

1. 优先修复index.js的根组件注册逻辑，确保Provider包裹的组件被Expo正确注册
2. 修正App.js里的拼写、变量引用错误
3. 清理无用的依赖导入

这样应该就能解决Redux的store找不到的问题，同时避免后续的其他运行错误。

内容的提问来源于stack exchange，提问作者James Gee