React Native类组件集成Redux报错排查与解决方案咨询

错误1：找不到Connect(App)上下文的store #

问题根源：connect 高阶组件需要从React上下文获取Redux Store，但根组件未被Provider组件包裹，导致上下文无Store可用。
解决方法：在入口文件中用react-redux提供的Provider组件包裹根组件，并传入创建好的Store实例。

错误2：configureStore不是函数 #

问题根源：两种常见情况：

• 未安装Redux Toolkit，却尝试调用configureStore（该API属于Redux Toolkit，而非传统Redux）；
• 导入路径错误，比如从redux而非@reduxjs/toolkit导入。
  解决方法：

1. 安装Redux Toolkit依赖：npm install @reduxjs/toolkit react-redux
2. 正确导入：import { configureStore } from '@reduxjs/toolkit'

错误3：AppRegistry调用失败 #

问题根源：通常是传给AppRegistry.registerComponent的不是被Provider包裹后的根组件，或者组件导出方式错误。
解决方法：将被Provider包裹后的组件作为参数传入AppRegistry.registerComponent。

类组件集成Redux的完整正确实现 #

1. 创建Redux Slice（以计数器为例） #

新建src/redux/slices/counterSlice.js：

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  value: 0,
};

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

2. 创建Redux Store #

新建src/redux/store.js：

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './slices/counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

3. 入口文件配置Provider #

修改index.js（或App.js，依项目结构而定）：

import React from 'react';
import { AppRegistry } from 'react-native';
import { Provider } from 'react-redux';
import { store } from './src/redux/store';
import App from './App';

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

AppRegistry.registerComponent('YourAppName', () => ReduxWrappedApp);

4. 类组件中使用Redux #

修改App.js：

import React, { Component } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { connect } from 'react-redux';
import { increment, decrement } from './src/redux/slices/counterSlice';

class App extends Component {
  render() {
    const { counterValue, increment, decrement } = this.props;
    return (
      <View style={styles.container}>
        <Text style={styles.text}>当前计数：{counterValue}</Text>
        <Button title="+" onPress={increment} />
        <Button title="-" onPress={decrement} />
      </View>
    );
  }
}

// 映射Redux状态到组件props
const mapStateToProps = (state) => ({
  counterValue: state.counter.value,
});

// 映射Redux动作到组件props
const mapDispatchToProps = {
  increment,
  decrement,
};

// 用connect连接组件与Redux
export default connect(mapStateToProps, mapDispatchToProps)(App);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    gap: 20,
  },
  text: {
    fontSize: 20,
  },
});

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