如何在React类组件中使用Redux？现有实现方案失效求助

当然可以在React类组件中使用Redux，你之前的方案不生效是因为useSelector是React Hooks，只能在函数组件或自定义Hook内部调用，直接导入到类组件里调用会违反Hooks的规则，所以无法正常工作。

下面是两种可行的实现方式：

方式一：使用connect高阶组件（官方推荐） #

这是Redux为类组件提供的经典集成方式，通过react-redux库的connect函数把store中的数据和dispatch方法映射到组件的props上。

步骤示例： #

1. 从react-redux导入connect
2. 定义mapStateToProps函数，把store中的状态映射到组件props
3. 定义mapDispatchToProps（可选），把dispatch方法或action创建函数映射到props
4. 用connect包裹你的类组件

代码示例：

import React, { Component } from 'react';
import { connect } from 'react-redux';
// 导入你的action创建函数（如果需要）
import { incrementCounter } from './actions';

class MyClassComponent extends Component {
  render() {
    // 通过props获取store中的数据
    const { counter, increment } = this.props;
    return (
      <div>
        <p>当前计数：{counter}</p>
        <button onClick={increment}>点击增加</button>
      </div>
    );
  }
}

// 把store中的state映射到组件props
const mapStateToProps = (state) => {
  return {
    counter: state.counter // 假设store中有counter这个状态
  };
};

// 把action创建函数绑定到dispatch，映射到props
const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => dispatch(incrementCounter())
  };
};

// 用connect包裹组件，导出连接后的组件
export default connect(mapStateToProps, mapDispatchToProps)(MyClassComponent);

方式二：直接使用Redux store（不推荐） #

如果你不想用connect，也可以直接在类组件中获取store实例，通过store.subscribe订阅状态变化，手动更新组件。但这种方式需要自己处理状态同步，容易出错，官方更推荐用connect。

代码示例：

import React, { Component } from 'react';
import store from './store'; // 导入你的Redux store实例

class MyClassComponent extends Component {
  constructor(props) {
    super(props);
    // 初始化组件状态为store的当前状态
    this.state = {
      counter: store.getState().counter
    };
  }

  componentDidMount() {
    // 订阅store变化，更新组件状态
    this.unsubscribe = store.subscribe(() => {
      this.setState({
        counter: store.getState().counter
      });
    });
  }

  componentWillUnmount() {
    // 组件卸载时取消订阅，防止内存泄漏
    this.unsubscribe();
  }

  render() {
    return (
      <div>
        <p>当前计数：{this.state.counter}</p>
        <button onClick={() => store.dispatch({ type: 'INCREMENT' })}>点击增加</button>
      </div>
    );
  }
}

export default MyClassComponent;

关键前提 #

确保你的应用已经通过react-redux的Provider组件把store传递给了整个应用，否则connect和Hooks都无法正常工作：

// 在根组件中
import { Provider } from 'react-redux';
import store from './store';
import MyClassComponent from './MyClassComponent';

function App() {
  return (
    <Provider store={store}>
      <MyClassComponent />
    </Provider>
  );
}

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