如何在 React 类组件和函数组件中使用 Redux

在开始之前，请确保您已经正确安装了 Redux 及其相关依赖（如 redux、react-redux 等），并且也已经创建了数据存储（store）、动作（actions）和规约器（reducers）。react 如何使用 store

1. React 类组件与 Redux#

首先，您需要使用 connect 高阶组件将组件连接到 Redux。connect 的两个主要参数是 mapStateToProps 和 mapDispatchToProps。mapStateToProps 用于从 Redux store 处选择您需要的 state 片段，并将其映射到组件的属性。而 mapDispatchToProps 则用于将创建的操作（action creators）与组件属性相关联。以下是一个简单的例子：

// 首先导入依赖：
javascript
import React from 'react';
import { connect } from 'react-redux';
import { sampleActionCreator } from './actions';

// 然后是类组件：

class SampleComponent extends React.Component {
onButtonClick = () => {
this.props.sampleActionCreator();
};

render() {
const { dataFromReduxStore } = this.props;

return (
  <div>
    <button onClick={this.onButtonClick}>Trigger Redux Action</button>
    <p>Data from Redux store: {dataFromReduxStore}</p>
  </div>
);
}
}


// 接下来是连接组件和Redux：

const mapStateToProps = (state) => ({
dataFromReduxStore: state.sampleReducer.data,
});

const mapDispatchToProps = {
sampleActionCreator,
};

export default connect(mapStateToProps, mapDispatchToProps)(SampleComponent);

2. React 函数组件与 Redux#

在函数组件中，可以使用 react-redux 提供的 useSelector 和 useDispatch 钩子来连接 Redux。

// 首先导入依赖：
javascript
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { sampleActionCreator } from './actions';

// 然后是函数组件：

const SampleComponent = () => {
const dataFromReduxStore = useSelector((state) => state.sampleReducer.data);
const dispatch = useDispatch();

const onButtonClick = () => {
dispatch(sampleActionCreator());
};

return (
<div><button /></div>
Trigger Redux Action
Data from Redux store: {dataFromReduxStore}



);
};
export default SampleComponent;

以上就是在 React 类组件和函数组件中使用 Redux 的方法。这两种方法的主要区别在于采用了不同的模式（类组件使用 connect 高阶组件和 mapStateToProps/mapDispatchToProps，而函数组件使用 useSelector 和 useDispatch 钩子函数）来完成 state 选择和 get action 创建器功能。