一、什么是Redux
Redux是一个流行的JavaScript框架，为应用程序提供一个可预测的状态容器。Redux基于简化版本的Flux框架，Flux是Facebook开发的一个框架。在标准的MVC框架中，数据可以在UI组件和存储之间双向流动，而Redux严格限制了数据只能在一个方向上流动。见下图：
在Redux中，所有的数据（比如state）被保存在一个被称为store的容器中 → 在一个应用程序中只能有一个。store本质上是一个状态树，保存了所有对象的状态。任何UI组件都可以直接从store访问特定对象的状态。要通过本地或远程组件更改状态，需要分发一个action。分发在这里意味着将可执行信息发送到store。当一个store接收到一个action，它将把这个action代理给相关的reducer。reducer是一个纯函数，它可以查看之前的状态，执行一个action并且返回一个新的状态。
二、三大原则
（1）单一数据源
整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。
（2）state是只读的
state是只读的，能改变state的唯一方式是通过触发action来修改。action 是一个用于描述已发生事件的普通对象。
（3）使用纯函数执行修改
为了描述 action 如何改变 state tree ， 你需要编写 reducers。
Reducer 只是一些纯函数，它接收先前的 state 和 action，并返回新的 state。刚开始你可以只有一个 reducer，随着应用变大，你可以把它拆成多个小的 reducers，分别独立地操作 state tree 的不同部分，因为 reducer 只是函数，你可以控制它们被调用的顺序，传入附加数据，甚至编写可复用的reducer 来处理一些通用任务，如分页器
三、基础
（1）Action
顾名思义，action就是动作，也就是通过动作来修改state的值。也是修改store的唯一途径。
action本质上就是一个普通js对象，我们约定这个对象必须有一个字段type，来表示我们的动作名称。一般我们会使用一个常量来表示type对应的值。
此外，我们还会把希望state变成什么样子的对应的值通过action传进来，那么这里action可能会类似这样子的
{
type: 'TOGGLE_TODO',
index: 5
}
（2）Reducer
Action 只是描述了有事情发生了这件事实，但并没有说明要做哪些改变，这正是reducer需要做的事情。
Reducer作为纯函数，内部不建议使用任何有副作用的操作，比如操作外部的变量，任何导致相同输入但输出却不一致的操作。
如果我们的reducer比较多，比较复杂，我们不能把所有的逻辑都放到一个reducer里面去处理，这个时候我们就需要拆分reducer。
幸好，redux提供了一个api就是combineReducersApi。
（3）Store
store是redux应用的唯一数据源，我们调用createStore Api创建store。
四、基础使用案例
我们看到页面正确的显示了我们user的名称。下一步我们需要做的就是通过用户的操作，改变store的值，进而触发view的更新。
于是我们新增下面这块代码：
我们看到保存之后，当我们输入值之后，点击更改，页面的值随着改变。
因此开发一个redux应用的步骤就是
1.定义action和与之对应的reducer
2.监听store的变化，提供回调函数
3.dispatch一个action，修改数据
五、高级应用
我们也看到了，我们的reducer只能做同步应用，如果我们需要在reducer，做一些延迟操作，需要怎么操作
社区已经有成熟的类库做这件事件
npm install redux-thunk --save
redux本身已经提高了很好的扩展机制，就是中间件。这点很类似express的中间件。
redux-thunk的作用就是让dispatch方法不仅仅只接收action对象，还可以包含一个方法。我们可以在这个方法内部去调用异步代码
我们把dom事件做了如下改造
可以看到页面元素确实在2s之后发生了变化，在实际业务中，我们这里可以做一些异步操作。
了解新钛云服
新钛云服正式获批工信部ISP/IDC(含互联网资源协作)牌照
新钛云服，打造最专业的Cloud MSP+，做企业业务和云之间的桥梁
新钛云服出品的部分精品技术干货
刚刚，OpenStack 第 19 个版本来了，附28项特性详细解读！
OpenStack与ZStack深度对比：架构、部署、计算存储与网络、运维监控等
1343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
