Redux简介

1.使用场景

虽然好，也并不是什么情况下都要使用，如果在项目中遇到一下场景，你会自发的寻找一个工具来解决问题，这时就是隆重登场的时候了：

业务层面：

用户的使用方式复杂

不同身份的用户有不同的使用方式（比如普通用户和管理员）

多个用户之间可以协作

与服务器大量交互，或者使用了

要从多个来源获取数据

组件层面：

某个组件的状态，需要共享

某个状态需要在任何地方都可以拿到

一个组件需要改变全局状态

一个组件需要改变另一个组件的状态

如果通过上面的考虑，你还是不知道是否需要使用，那很有可能就是你不需要使用

2.设计思想

两句话概括：

Web 应用是一个状态机，视图与状态是一一对应的。

所有的状态，保存在一个对象里面。

结合这个图对原理做一下解释，也许有些名字还是不懂，但是可以先有个印象，接下来我们会做进一步的介绍。

用户会在上进行一系列操作，而每一个操作都对应一个。对象通过调用方法，传入上次的状态（）和操作（），经过针对不同的，改变的值，然后返回一个，然后对象可以通过方法，获取这个新状态。最后进行相应的视图更新。web应用所有的状态都保存在中，每一个都对应一个视图。

3.核心概念

state：

整个都是围绕状态进行的操作，所有的 都被保存在一个单一对象中。建议在写代码前先想一下这个对象的结构。如何才能以最简的形式把应用的 用对象描述出来。如果应用较复杂在创建对象时，可以参考这些意见：http://cn.redux.js.org/docs/recipes/reducers/NormalizingStateShape.html。应用的初始状态可以在创建时传入，也可以根据中的默认值自动生成。

action：

每一个都有个对应的操作，所以中有这个操作的名字（类型）和需要的数据。 是把数据从应用传到 的有效载荷，它是数据的唯一来源。一般来说你会通过 将 传到 ；它本质上是JavaScripte的普通对象：

对象中字段一般是必须的，用来描述操作的类型。其他的参数都可以根据操作的需要，进行自定义扩充。

这个例子是像toDolist中添加一项，字段是这个todo的内容。很明显我们不能每一个不同的内容都有个，这个需要

reducer:

只是描述了一个操作，而没有描述如何针对这个进行状态更改。则描述了如何根据传入的，对状态做相应的改变。

在编写函数是要保证它的纯净性，不要进行以下操作：

不要修改传入的参数，尤其是在处理时，要返回新的对象

执行有副作用的操作，如 API 请求和路由跳转

调用非纯函数，如 或

要保证只要传入参数相同，返回计算得到的下一个就一定相同。没有特殊情况、没有副作用，没有API请求、没有变量修改，单纯执行计算

Store:

就是把、、 联系到一起的对象。 有以下职责

维持应用的

提供 方法获取

提供方法,然后通过更新

通过 注册监听器

通过返回的函数注销监听器

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

数据流：

严格的单向数据流是 架构的设计核心：

用户行为引起调用

调用函数：两个参数，当前的state和action

返回计算过的

触发所有订阅

4.简单实例

下面是一个toDoList的简单实例

http://jsbin.com/noxalaw/edit?html,js,console,output

5.高级用法

异步action：

上面讲到的触发的动作都是同步的，如果有异步的该如何处理呢？同步时只需触发一个，当异步时要要触发三个，分别为：

发起：操作开始时，送出一个 ，触发更新为"正在操作"状态， 重新渲染

成功： 操作结束后，再送出一个 ，触发 更新为"操作结束"状态， 再一次重新渲染

失败： 请求失败时发出，触发更新，显示错误状态

这三个对应的描述如下：

给出一个异的示例：

现在返回了一个函数，而在同步时返回一个普通对像。在默认情况下的参数只能是一个对象，不能是一个函数。这个时候就需要引入中间件： ，让参数可以传入函数。

所以，异步操作的一种解决方案就是:

一个返回函数的 ，

使用中间件改造，使其能支持函数作为参数

至于中间件是如何操作的，这里就不细述了，有兴趣的同学可以参考http://cn.redux.js.org/docs/advanced/Middleware.html

6.异步action的完整实例

http://jsbin.com/xexax/edit?html,js,console,output

参考：

http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_two_async_operations.html

https://tech.meituan.com/redux-design-code.html

https://cn.redux.js.org/docs/basics/