12.5使用react-redux库创建容器组件-React全家桶--前端开发与实例(下)

当前位置:　首页>> 技术小册>> React全家桶--前端开发与实例(下)

### 12.5 使用react-redux库创建容器组件

在React应用开发中，随着应用复杂度的提升，状态管理变得尤为关键。Redux作为一个可预测化的状态容器，为JavaScript应用（特别是React应用）提供了一种集中管理状态的方式。而`react-redux`库则是Redux官方提供的React绑定库，它让Redux与React应用更加紧密地集成，简化了Redux在React中的使用。本章节将深入探讨如何使用`react-redux`库来创建容器组件（Container Components），这是将Redux的state和actions映射到React组件的关键步骤。

#### 12.5.1 理解容器组件与展示组件

在React+Redux架构中，组件通常被分为两类：展示组件（Presentational Components）和容器组件（Container Components）。

- **展示组件**：负责UI的渲染，它接收props并返回React元素。展示组件不关心数据如何加载或状态如何变化，它只关心如何将接收到的数据展示给用户。它们应该是纯函数，不维护内部状态，不执行副作用操作，并且其输出完全由props决定。
- **容器组件**：负责管理数据和行为，即它们知道如何与Redux store交互，并将这些数据和行为作为props传递给展示组件。容器组件不直接渲染UI，而是通过组合其他组件（主要是展示组件）来形成更复杂的UI结构。

#### 12.5.2 安装react-redux

首先，确保你的项目中已经安装了Redux。接着，通过npm或yarn安装`react-redux`：

```bash
npm install react-redux
# 或者
yarn add react-redux
```

#### 12.5.3 Provider组件

在使用`react-redux`时，你需要将Redux的store通过`Provider`组件包裹在你的React应用的根组件上。这样，应用中的任何组件都能通过`connect`函数访问到Redux store中的状态。

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store'; // 假设你已经有了一个配置好的Redux store
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
```

#### 12.5.4 使用connect函数创建容器组件

`react-redux`提供的`connect`函数是创建容器组件的核心。`connect`函数接受两个可选参数：`mapStateToProps`和`mapDispatchToProps`，它们分别定义了如何将Redux store中的state和actions映射到组件的props上。

- **mapStateToProps**：一个函数，接收Redux store的state作为参数，并返回一个对象。这个对象的属性会被作为props传递给被包装的组件（即展示组件）。
- **mapDispatchToProps**：一个函数（或对象），用于将Redux actions作为props传递给被包装的组件。如果传递的是一个对象，`react-redux`会自动使用`bindActionCreators`将action creators绑定到dispatch上。

##### 示例：创建一个简单的计数器容器组件

假设我们有一个Redux的reducer来处理计数器的状态：

```javascript
// counterReducer.js
const initialState = {
  count: 0
};

现在，我们创建一个容器组件来管理这个计数器的状态：

```jsx
// CounterContainer.js
import React from 'react';
import { connect } from 'react-redux';
import Counter from './Counter'; // 假设我们有一个展示组件Counter

// mapStateToProps函数
const mapStateToProps = state => ({
  count: state.count // 假设Redux的state中有一个count属性
});

// mapDispatchToProps对象
const mapDispatchToProps = {
  increment: () => ({ type: 'INCREMENT' }),
  decrement: () => ({ type: 'DECREMENT' })
};

// 使用connect函数创建容器组件
const CounterContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter);

export default CounterContainer;
```

在上面的例子中，`CounterContainer`是一个容器组件，它通过`connect`函数接收Redux store中的`count`状态以及`increment`和`decrement`两个action creators。然后，它将这些props传递给`Counter`展示组件，由`Counter`组件负责具体的UI渲染。

#### 12.5.5 深入connect函数

`connect`函数不仅限于简单的state和action的映射，它还提供了额外的功能，如性能优化（通过`shouldComponentUpdate`）和更细粒度的控制（如`ownProps`的使用）。

- **性能优化**：默认情况下，每当Redux store中的state发生变化时，所有使用`connect`的组件都会重新渲染。但是，如果组件只依赖于state的一部分，你可以通过返回一个新的对象来优化这个行为，该对象只包含你关心的state字段。
- **ownProps**：`mapStateToProps`和`mapDispatchToProps`都可以接收第二个参数`ownProps`，即组件自身的props。这允许你根据组件的props来动态地映射state和actions。

#### 12.5.6 小结

通过`react-redux`库的`connect`函数，我们可以轻松地创建容器组件，将Redux的state和actions以props的形式传递给React组件，从而实现了Redux与React的紧密结合。容器组件和展示组件的分离，使得React应用的逻辑更加清晰，状态管理更加集中和可预测。在实际开发中，合理应用这一模式，将大大提升应用的可维护性和可扩展性。

该分类下的相关小册推荐：

React全家桶--前端开发与实例(上)

React 进阶实践指南

ReactJS面试指南

剑指Reactjs

深入学习React实战进阶