一、状态机

redux用来帮助我们管理应用的状态,它本身和React并无关系,但是非常多的React应用都选择是用redux管理应用的状态。在实际的React项目中,使用redux和react-redux这两个工具。react-redux这个工具提供了一系列的简洁api,让我们更好地在React中使用redux。

redux的设计理念基于状态机的概念。当一个应用的状态较多,状态变化逻辑比较复杂时候,使用状态机来梳理逻辑会有助于开发者理解和实现。

状态机提出“状态”(state)和“操作”(action)的概念,

一个应用或者一个功能可能会处于不同的状态。

一个状态在进行操作后,可能会变到其他的状态,也可能维持当前状态不变。

按照状态机去理解和分析一个应用,会更清晰,有条理,而不会有无从下手的感觉。开发者只需要找出应用都有哪些状态和哪些操作,在进行某个操作时候,状态是如何变化的,就能实现这个应用了。

下面通过一个小例子理解什么是状态机。

Redux_Redux

这个状态机描述的是一个开关的逻辑,初始是“off”状态,经过“open”操作,状态变为“on”,而处于“on”状态时候,经过“close”操作,状态会变为“off”。

可以看到,状态机通过“状态”和“操作”两个概念,就可以将一个功能逻辑有条理地描述清楚。

二、Flux和Redux

Flux是Facebook用户建立客户端Web应用的前端架构, 它通过利用一个单向的数据流补充了React的组合视图组件,这更是一种模式而非正式框架。

Flux使用状态机的思想描述应用的状态变化,Flux架构图示如下:

Redux_Redux_02

Flux架构中,可能有多个store,每个组件可以拥有自己的store。

dispatcher是一个集中的分发器,当收到action时候将action分发到所有的store,关心这个action的store就会根据用户注册的处理方法对action处理,得到最新的状态,然后store会把最新的状态通知到view,view监听到状态更新后,用最新的状态重新渲染视图。

Flux的一个核心就是单向数据流,视图只能通过触发action改变状态,不能直接修改store。

Flux中的store用来存储状态并根据action计算新的状态。

Redux是实现了Flux思想的最著名的一个库。

Redux架构核心也是单向数据流,Redux架构中包含3大核心:actions、store和reducers。

视图触发Action,store接收到action之后调用reducer计算新的状态,然后更新状态并通知视图。

Redux_Redux_03

前端Flux架构简介

React实战:Redux应用架构