在 Redux 中使用容器组件和展示组件实现状态管理与渲染分离

2023-09-21 11:04:46

在这一部分中，我们会提出 “容器组件” 和 “展示组件” 的概念，“容器组件” 用于接管 “状态”，“展示组件” 用于渲染界面，其中 “展示组件” 也是 React 诞生的初心，专注于高效的编写用户界面。Redux 的出现，通过将 State 从 React 组件剥离，并将其交由 Redux 管理，使得我们可以将组件的状态与组件的渲染逻辑分离，从而使代码更加易于维护和测试。

容器组件

容器组件是 Redux 中用来管理状态的组件。它负责将 Redux 的 state 映射到组件的 props，并负责 dispatch action 来更新 Redux 的 state。容器组件通常会使用 connect() 方法来连接 Redux 的 store。

容器组件的职责

将 Redux 的 state 映射到组件的 props。
负责 dispatch action 来更新 Redux 的 state。
负责将 Redux 的 store 连接到组件。

容器组件的实现

容器组件的实现通常需要以下几个步骤：

引入必要的 Redux 库。
创建一个 Redux store。
定义一个 mapStateToProps() 函数，用来将 Redux 的 state 映射到组件的 props。
定义一个 mapDispatchToProps() 函数，用来 dispatch action。
使用 connect() 方法将 Redux 的 store 连接到组件。

容器组件的示例

下面是一个简单的容器组件示例：

import { connect } from 'react-redux';

const mapStateToProps = (state) => {
  return {
    count: state.count
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    incrementCount: () => dispatch({ type: 'INCREMENT_COUNT' }),
    decrementCount: () => dispatch({ type: 'DECREMENT_COUNT' })
  };
};

const CounterContainer = connect(mapStateToProps, mapDispatchToProps)(Counter);

export default CounterContainer;

这个容器组件将 Redux 的 state 中的 count 字段映射到组件的 props，并提供了 incrementCount() 和 decrementCount() 两个方法来 dispatch action。

展示组件

展示组件是 Redux 中用来渲染界面的组件。它不负责管理状态，只负责根据 props 来渲染界面。展示组件通常是纯函数，这意味着它们不会改变 props 的值。

展示组件的职责

根据 props 来渲染界面。
不负责管理状态。
通常是纯函数。

展示组件的实现

展示组件的实现通常只需要一个 render() 方法。render() 方法根据 props 来渲染界面。

展示组件的示例

下面是一个简单的展示组件示例：

const Counter = (props) => {
  return (
    <div>
      <h1>Count: {props.count}</h1>
      <button onClick={props.incrementCount}>+</button>
      <button onClick={props.decrementCount}>-</button>
    </div>
  );
};

export default Counter;