Redux状态管理容器

一、什么是Redux

Redux是一个流行的JavaScript框架,为应用程序提供一个可预测的状态容器。Redux基于简化版本的Flux框架,Flux是Facebook开发的一个框架。在标准的MVC框架中,数据可以在UI组件和存储之间双向流动,而Redux严格限制了数据只能在一个方向上流动。见下图:

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。

四、基础使用案例

Redux状态管理容器

Redux状态管理容器

Redux状态管理容器

我们看到页面正确的显示了我们user的名称。下一步我们需要做的就是通过用户的操作,改变store的值,进而触发view的更新。

于是我们新增下面这块代码:

我们看到保存之后,当我们输入值之后,点击更改,页面的值随着改变。

Redux状态管理容器

因此开发一个redux应用的步骤就是

1.定义action和与之对应的reducer

2.监听store的变化,提供回调函数

3.dispatch一个action,修改数据

五、高级应用

我们也看到了,我们的reducer只能做同步应用,如果我们需要在reducer,做一些延迟操作,需要怎么操作

社区已经有成熟的类库做这件事件

npminstallredux-thunk–save

redux本身已经提高了很好的扩展机制,就是中间件。这点很类似express的中间件。

Redux状态管理容器

redux-thunk的作用就是让dispatch方法不仅仅只接收action对象,还可以包含一个方法。我们可以在这个方法内部去调用异步代码

我们把dom事件做了如下改造

Redux状态管理容器

可以看到页面元素确实在2s之后发生了变化,在实际业务中,我们这里可以做一些异步操作。