12 | Redux（2） : 深入理解Store、Action、Reducer-深入学习React实战进阶

当前位置:　首页>> 技术小册>> 深入学习React实战进阶

### 12 | Redux（2）: 深入理解Store、Action、Reducer

在React应用中，随着应用复杂度的提升，状态管理成为一个日益重要的挑战。Redux作为JavaScript应用的状态容器，提供了一种可预测化的状态管理方式，使得状态管理变得清晰、可追踪。本章将深入探讨Redux中的三大核心概念：Store、Action、Reducer，帮助读者构建坚实的状态管理基础。

#### 1. Redux 概述

在正式进入Store、Action、Reducer的详细解析之前，让我们先简要回顾Redux的基本概念和架构。Redux的设计思想基于几个核心原则：单一真实数据源（Single source of truth）、状态是只读的（State is read-only）、使用纯函数来执行修改（Changes are made with pure functions）。这些原则共同确保了Redux应用的状态管理既清晰又高效。

Redux架构主要包含三个部分：Store、Action、Reducer，它们通过严格的约定协同工作，共同维护应用的状态。

#### 2. Store

##### 2.1 Store 的角色

Store是Redux中用于存储应用所有状态的对象。它包含了当前应用的状态树（state tree），并且提供了一系列的方法来查询当前状态、分发（dispatch）actions以及注册监听器（listener）来响应状态的变化。

##### 2.2 创建 Store

在Redux中，使用`createStore(reducer, [preloadedState], [enhancer])`函数来创建Store。其中，`reducer`是一个函数，用于根据当前的state和action来计算出新的state；`preloadedState`是初始状态，可选；`enhancer`是一个高阶函数，用于增强Store的功能，如应用中间件，同样是可选的。

```javascript
import { createStore } from 'redux';

const store = createStore(counterReducer);
```

##### 2.3 Store 的方法

- `getState()`：返回应用当前的state。
- `dispatch(action)`：分发一个action，这是改变state的唯一途径。
- `subscribe(listener)`：注册一个监听器，当state更新时，这个监听器会被调用。
- `replaceReducer(nextReducer)`：替换当前的reducer，这在代码分割或动态加载reducer时非常有用。

#### 3. Action

##### 3.1 Action 的定义

Action是一个描述已发生事件的普通JavaScript对象。它必须有一个`type`属性来指示发生了哪种类型的action。除了`type`，action对象还可以包含其他任何属性，这些属性表示与action相关的数据。

```javascript
{
  type: 'INCREMENT'
}

{
  type: 'ADD_TODO',
  text: 'Learn Redux'
}
```

##### 3.2 Action 的创建函数

为了保持action对象的结构清晰，并便于管理和复用，通常会定义action的创建函数（action creators）。这些函数接收必要的参数，并返回相应的action对象。

```javascript
function increment() {
  return { type: 'INCREMENT' };
}

function addTodo(text) {
  return { type: 'ADD_TODO', text };
}
```

#### 4. Reducer

##### 4.1 Reducer 的角色

Reducer是一个纯函数，它接收先前的state和一个action作为参数，返回新的state。Reducer必须保持纯净，即不修改传入的state，不执行有副作用的操作（如API调用或路由跳转），只根据传入的state和action计算出新的state。

##### 4.2 Reducer 的结构

Reducer函数通常通过switch语句或条件表达式来根据action的`type`属性决定如何更新state。如果action与当前reducer无关，则默认返回当前的state，保持状态不变。

```javascript
function todosReducer(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, { text: action.text, completed: false }];
    case 'TOGGLE_TODO':
      return state.map(todo =>
        todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
      );
    default:
      return state;
  }
}
```

##### 4.3 分割 Reducer

随着应用规模的扩大，单个reducer可能会变得难以管理。Redux提供了结合多个reducer来管理应用状态的方法，这通常通过`combineReducers`函数实现。`combineReducers`将多个reducer合并成一个单一的reducer，每个reducer独立管理应用状态树的一部分。

```javascript
import { combineReducers } from 'redux';

const rootReducer = combineReducers({
  counter: counterReducer,
  todos: todosReducer
});

const store = createStore(rootReducer);
```

#### 5. Store、Action、Reducer 的协同工作

在Redux应用中，Store、Action、Reducer三者紧密协作，共同维护应用的状态。用户通过视图层（如React组件）与界面交互，触发action的创建。Action被分发到Store中，Store将action和当前的state传递给reducer。Reducer根据action的类型和当前的state计算出新的state，然后Store用新的state替换旧的state，并通过注册的监听器通知所有订阅者（如React组件）状态已经更新。最后，视图层根据新的状态重新渲染，展示给用户最新的界面。

#### 6. 深入理解与应用

- **单一真实数据源**：Redux强制应用只有一个全局的state对象，这有助于减少数据的不一致性和调试的复杂性。
- **纯函数的应用**：Reducer作为纯函数，确保了状态更新的可预测性和可测试性。
- **时间旅行调试**：Redux DevTools等工具利用Redux的架构特性，允许开发者在时间线上回溯和前进应用的状态变化，极大地提高了调试效率。
- **性能优化**：由于Redux的状态更新是可预测的，开发者可以更容易地实现诸如状态缓存、懒加载等性能优化策略。

#### 7. 结语

通过对Redux中Store、Action、Reducer的深入理解，我们掌握了Redux状态管理的核心机制。Redux的设计哲学和架构为React应用提供了强大的状态管理能力，使得开发者能够构建出更加复杂、可维护的Web应用。在实际开发中，合理应用Redux的这些核心概念，将极大提升应用的性能和可维护性。希望本章的内容能为你的React实战进阶之路提供坚实的支持。

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

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

剑指Reactjs

React 进阶实践指南

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

ReactJS面试指南