使用Redux Toolkit在React Native实现CRUD时遇Provider包裹错误求助

核心问题 #

你当前代码的问题在于：AppRegistry.registerComponent注册的根组件是App，而非包裹了<Provider>的DataStore组件。这导致App及其所有子组件都没有处于Redux的上下文环境中，当组件尝试访问Redux状态或操作时，自然会抛出找不到context value的错误。

修正后的代码 #

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
import { configureStore } from "@reduxjs/toolkit";
import { Provider } from "react-redux";
import userReducer from './src/userData/UserData'

const DataStore = () => {
    const store = configureStore({
        reducer: {
            user: userReducer
        }
    })
    return (
        <Provider store={store}>
            <App />
        </Provider>
    );
};

// 注册包裹了Provider的DataStore作为根组件
AppRegistry.registerComponent(appName, () => DataStore)

export default DataStore

优化建议（可选） #

为避免组件重复渲染时多次创建store，可把store定义在组件外部：

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
import { configureStore } from "@reduxjs/toolkit";
import { Provider } from "react-redux";
import userReducer from './src/userData/UserData'

// 外部定义store，仅初始化一次
const store = configureStore({
    reducer: {
        user: userReducer
    }
})

const DataStore = () => {
    return (
        <Provider store={store}>
            <App />
        </Provider>
    );
};

AppRegistry.registerComponent(appName, () => DataStore)

export default DataStore

内容的提问来源于stack exchange，提问作者Praveen Kumar S