Redux三大核心介绍及拓展

什么是Redux？

• Redux是JavaScript状态容器，提供可预测化的状态管理
• Redux是由flux演化而来
• Redux最主要的应用是用作应用状态的管理

Redux三大核心主要是action、reducer、store

---

1. action

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

添加新 todo 任务的 action 是这样的：

action的本质

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

action 创建函数

Action 创建函数 就是生成 action 的方法。“action” 和 “action 创建函数” 这两个概念很容易混在一起，使用时最好注意区分。

在 Redux 中的 action 创建函数只是简单的返回一个 action:

这样做将使 action 创建函数更容易被移植和测试。
注意每个 reducer 只负责管理全局 state 中它负责的一部分。每个 reducer 的 state 参数都不同，分别对应它管理的那部分 state 数据。

---

2. Reducer

Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。
Reducer 是一个纯函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。


纯函数

Reducer 函数最重要的特征是，它是一个纯函数。也就是说，只要是同样的输入，必定得到同样的输出。
纯函数是函数式编程的概念，必须遵守以下一些约束。

• 不得改写参数
• 不能调用I/O的API
• 不能调用Date.new()或者Math.random()等不纯的方法，因为每次会得到不一样的结果

由于 Reducer 是纯函数，就可以保证同样的State，必定得到同样的 View。但也正因为这一点，Reducer 函数里面不能改变 State，必须返回一个全新的对象，请参考下面的写法。

最好把 State 对象设成只读。你没法改变它，要得到新的 State，唯一办法就是生成一个新对象。这样的好处是，任何时候，与某个 View 对应的 State 总是一个不变的对象。

Redux的拆分

Redux 提供了 combineReducers() 工具类来做上面 todoApp 做的事情，这样就能消灭一些样板代码了。有了它，可以这样重构 todoApp：

注意上面的写法和下面的完全等价

ES6的用户注意

combineReducers 接收一个对象，可以把所有顶级的 reducer 放到一个独立的文件中，通过 export 暴露出每个 reducer 函数，然后使用 import * as reducers 得到一个以它们名字作为 key 的 object：

---

3. store

上文，我们学会了使用 action 来描述“发生了什么”，和使用 reducers 来根据 action 更新 state 的用法。
Store 就是把它们联系到一起的对象。Store 有以下职责：

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

再次强调一下 Redux 应用只有一个单一的 store。当需要拆分数据处理逻辑时，你应该使用 reducer 组合 而不是创建多个 store。

根据已有的 reducer 来创建 store 是非常容易的。在前一节中，我们使用 combineReducers() 将多个 reducer 合并成为一个。现在我们将其导入，并传递 createStore()。

createStore() 的第二个参数是可选的, 用于设置 state 初始状态。这对开发同构应用时非常有用，服务器端 redux 应用的 state 结构可以与客户端保持一致, 那么客户端可以将从网络接收到的服务端 state 直接用于本地数据初始化。

上面代码中，window.STATE_FROM_SERVER就是整个应用的状态初始值。注意，如果提供了这个参数，它会覆盖 Reducer 函数的默认初始值。

Redux总体工作流程

---

拓展

1. 中间件（middleware）

中间件就是一个函数，对store.dispatch方法进行了改造，在发出 Action 和执行 Reducer 这两步之间，添加了其他功能。

上面代码中，redux-logger提供一个生成器createLogger，可以生成日志中间件logger。然后，将它放在applyMiddleware方法之中，传入createStore方法，就完成了store.dispatch()的功能增强。

这里有两点需要注意：

1. createStore方法可以接受整个应用的初始状态作为参数，那样的话，applyMiddleware就是第三个参数了。
   
2. 中间件的次序有讲究。
   
   上面代码中，applyMiddleware方法的三个参数，就是三个中间件。有的中间件有次序要求，使用前要查一下文档。比如，logger就一定要放在最后，否则输出结果会不正确。

applyMiddlewares是 Redux 的原生方法，作用是将所有中间件组成一个数组，依次执行。所有中间件被放进了一个数组chain，然后嵌套执行，最后执行store.dispatch。

常用中间件

• redux-logger中间件提供一个生成器createLogger，可以生成日志中间件
• loggerredux-thunk 中间件改造store.dispatch，使得后者可以接受函数作为参数
• redux-promise 中间件使得store.dispatch方法可以接受 Promise 对象作为参数

2. React-Redux

目前三大主流框架react、vue、angular都拥有其各自管理应用状态的手段，其中react我比较推崇使用redux进行管理状态。

实际上react和redux两个是完全不相关的，只是react需要使用到redux来进行自己的应用状态管理。而在react项目中使用redux，比较好的方式是借助react-redux这个库来做连接。react-redux提供两个关键模块：connect和provider。

connect

React-Redux 提供connect方法，用于从 UI 组件生成容器组件。connect的意思，就是将这两种组件连起来。

connect方法接受两个参数：mapStateToProps和mapDispatchToProps。它们定义了 UI 组件的业务逻辑。前者负责输入逻辑，即将state映射到 UI 组件的参数（props），后者负责输出逻辑，即将用户对 UI 组件的操作映射成 Action。

Provider组件

connect方法生成容器组件以后，需要让容器组件拿到state对象，才能生成 UI 组件的参数。

一种解决方法是将state对象作为参数，传入容器组件。但是，这样做比较麻烦，尤其是容器组件可能在很深的层级，一级级将state传下去就很麻烦。

React-Redux 提供Provider组件，可以让容器组件拿到state。

上面代码中，Provider在根组件外面包了一层，这样一来，App的所有子组件就默认都可以拿到state了。

---

总结

三大原则

◇ state以单一对象存储在store对象中

◇ state是只读的，只有get，没有set

◇ 使用纯函数Reducer执行state更新

state为单一对象，使得redux只需要维护一颗状态树，服务端很容易初始化状态，易于服务器渲染。
state只能通过dispatch（action）来触发更新，更新逻辑由Reducer来执行。
redux是一个单向数据流的架构，提供可供预测状态管理
分离了state和props，防止造成混乱
分离了UI和业务逻辑（中间件react-thunk也可以分离出异步数据操作）

自述·Redux