redux 状态管理一：redux 基础

一、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 进行包装，以便可以直接调用它们。