redux 状态管理一：redux 基础

红太狼 2022-01-22 01:13 374阅读 0赞

### 一、redux 的工作流程 ###

*  状态统一放在 state 中，由 store 来管理 state；
 *  store 由 reducer 创建，reducer 接受之前的状态，返回新的状态；
 *  外部改变 state 的唯一方法是通过调用 store 的 dispatch 方法，触发一个 action，这个 action 被对应的 reducer 处理，state 完成更新；
 *  可以通过 subscribe 在 store 上添加一个监听函数，store 中 dispatch 方法被调用时，会执行这个监听函数；
 *  可以添加中间件。

### 二、工作流程中 redux 提供的功能 ###

*  创建 store，即 createStore()；
 *  合并 reducer，即 combineReducers()；
 *  创建出来的 store 提供 subscribe，dispatch，getState 等方法；
 *  应用中间件，即 applyMiddleware()。

### 三、redux 中间件工作流程 ###

redux 工作流程（同步）：

*  dispatch 一个 action；
 *  这个 action 被 reducer 处理；
 *  reducer 根据 action 更新 store（中的 state）。

使用中间件后工作流程：

*  dispatch 一个 action；
 *  这个 action 先被中间件处理（比如在这里发送一个异步请求）；
 *  中间件处理结束后，再发送一个 action（有可能是原来的 action，也可能是不同的 action，视中间件功能而不同）；
 *  中间件发出的 action 可能继续被另一个中间件处理，进行类似前面的步骤，即中间件可以链式串联；
 *  最后一个中间件处理完后，dispatch 一个符合 reducer 处理标准的 action；
 *  这个标准的 action 被 reducer 处理；
 *  reducer 根据 action 更新 store（中的 state）。

### 四、基础 ###

#### 1、Store ####

职责：

*  维持应用的 state；
 *  提供 getState() 方法获取 state；
 *  提供 dispatch(action) 方法更新 state；
 *  通过 subscribe(listener) 注册监听器；
 *  通过 subscribe(listener) 返回的函数注销监听器。

Redux 应用只有一个单一的 store。

**createStore()**：创建一个 store。

*  第一个参数 reducer（Function）。
 *  第二个参数是可选的，用于设置 state 的初始状态；
 *  第三个参数 enhancer（Function）：Store enhancer 是一个组合 store creator 的高阶函数，返回一个新的强化过的 store creator。
 *  服务端 redux 应用的 state 结构可以与客户端保持一致，客户端可以将网络接收到的服务端 state 直接用于本地数据初始化。

**applyMiddleware(…middlewares)**：组合 middleware 形成 middleware链。

*  参数：…middlewares：遵循 Redux middleware API 的函数。每个 middleware 接受 Store 的 dispatch 和 getState 函数作为命名参数，并返回一个函数。
 *  该函数会被传入 被称为 next 的下一个 middleware 的 dispatch 方法，并返回一个接收 action 的新函数，这个函数可以直接调用 next(action)，或者在其他需要的时刻调用，甚至根本不去调用它。
 *  调用链中最后一个 middleware 会接受真实的 store 的 dispatch 方法作为 next 参数，并借此结束调用链。所以，middleware 的函数签名是 (\{ getState, dispatch \}) => next => action。

#### 2、reducer ####

reducer 的功能：reducer 接受一个旧的状态和一个 action，当这个 action 被触发的时候，reducer 处理后返回一个新状态。

**reducer 是一个纯函数**，什么是纯函数：

*  不能修改传入参数；
 *  不能执行有副作用的操作，如：API请求和路由跳转等；
 *  不能调用非纯函数，如：Date.now() 或 Math.random()。

只要传入参数相同，返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用、没有 API 请求、没有变量修改，单纯执行计算。  
每个 reducer 只负责管理全局 state 中它负责的一部分，每个 reducer 的 state 参数都不同，分别对应它管理的那部分 state 数据。

**combineReducers()**：把子 reducer 合并成一个总 reducer。

*  redux 只有一个单一的 store；若是将多个状态分成多个模块，一个 reducer 处理所有状态更新会显得杂乱无章。
 *  combineReducers() 所做的只是生成一个函数，这个函数来调用你的一系列 reducer，每个 reducer 根据它们的 key 来筛选出 state 中的一部分数据并处理，然后这个生成的函数再将所有 reducer 的结果合并成一个大的对象。
 *  combineReducers() 就是将模块化的 reducer 合并成一个总 reducer 来配合这个单一的 store。

#### 3、Action ####

action 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。一般通过 store.dispatch() 将 action 传到 store。

Action 本质上是 JavaScript 普通对象。action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。  
多数情况下，type 会被定义成字符串常量。  
当应用规模越来越大时，建议使用单独的模块或文件来存放 action；使用单独的模块或文件来定义 action type 常量并不是必须的，甚至根本不需要定义。

**Action 创建函数**：生成 action 的方法。

*  Redux 中只需把 action 创建函数的结果传给 dispatch() 方法即可发起一次 dispatch 过程。
 *  或者创建一个 被绑定的 action 创建函数 来自动 dispatch，然后直接调用它们。
 *  store 里能直接通过 store.dispatch() 调用 dispatch() 方法。

**bindActionCreators(actionCreators, dispatch)**：把一个 value 为不同 action creator 的对象，转成拥有同名 key 的对象。同时使用 dispatch 对每个 action creator 进行包装，以便可以直接调用它们。