一、基本介绍
2013 年 Facebook 提出了 Flux 架构的思想,引发了很多的实现。2015年,Redux 出现,将 Flux 与函数式编程结合一起,很短时间内就成为了最热门的前端架构
React 与 Redux的区别就相当于 Java 和 JavaScript 的区别,完全是两种不同的东西,只不过名字比较像
Redux的设计思想:
- React 只是 DOM 的一个抽象层,并不是web应用的完整解决方案。代码结构和组件间的通信,他没有涉及
- web应用是一个状态机,视图与状态是一一对应的
- 所以的状态,保存在一个对象里面(唯一数据源)、
- 目的:实现集中式状态管理
- 如果你不知道是否需要 Redux ,那就是不需要它
- 只有遇到 React 实在解决不了的问题,你才需要Redux
- 简单说,如果你的UI层非常简单,没有很多互动,Redux就是不必要的,用了反而增加复杂性
- 比如:
- 用户的使用方式非常简单
- 用户之间没有协作
- 不需要与服务器大量交互,也没有使用WebSocket
- 视图层(View)只从单一来源获取数据
需要使用Redux的项目:
- 用户的使用方式复杂
- 不同身份的用户有不同的使用方式(比如普通用户和管理员)
- 多个用户之间可以协作
- 与服务器大量交互,或者使用了WebSocket
- View 要从多个来源获取数据
从组件层面考虑,什么样子需要Redux:
- 某个组件的状态,需要共享
- 某个状态需要在任何地方都可以拿到
- 一个组件需要改变全局状态
- 一个组件需要改变另一个组件的状态
二、三大原则
- 单一数据源
>整个应用的state被存储在一棵对象结构树中
>(整个state不是组件中的state,请不要混淆)
>并且这个对象结构只存在唯一一个store中
- State 是只读的
> 唯一改变 state 的方法就是触发 dispatch+action
> action是一个用于描述已发生时间的**普通对象**
> (action普通对象必须要有`type`属性,值是什么无所谓,其余属性也无所谓)
- 数据的改变必须通过纯函数完成
> 为了描述action如何改变state tree,我们需要编写reducer,
> reducer 必须是纯函数,它接收先前的state和action,并返回新的state(不会合并的,自行注意这个坑)
> 一个函数的返回结果只接收其形参的影响,则其就是纯函数
三、工作流程图
- 完整版:
先来个简单版本的:
- Store 相当于老板
- Reducers 相当于厨师
- Action Creators相当于服务员
- React Component 相当于顾客
- 打个比方:
- 顾客(React Component)想吃点东西,于是就把吃啥告诉了服务员(Action Creators)
- 服务员(Action Creators)就用菜单(dispatch)记录(action)下来,点了什么菜(type),和数量(data)。
- 然后把菜单( dispatch(action) )交给了老板(Store),老板就根据菜单上的内容,告诉给厨师(Reducers)让他炒什么菜
- 厨师(Reducers)收到老板的指示后,迅速的把菜做好。并端给(return newState)老板(Store)。
- 菜放到老板这后,老板(Store)就通知顾客(React Component)来取餐(getState)
- (previousState, action):顾客如果开始点了一个蛋炒饭,后面又加了一个紫菜汤。
- 此时表示蛋炒饭之前的数据(previousState),紫菜汤表示现在的数据( action)
再来看具体实现的:
Action
:动作的对象,有两个属性
type:标识属性,值为字符串,唯一,必选参数
data:数据属性,值类型任意,可选参数
Reducer
:用于初始化状态和加工状态
加工时根据旧的state值和传过来的action
生成新的state的值,是一个纯函数
Store
:将state、action、reducer联系在一起的对象,相当于指挥者
1. 创建store对象:createStore(reducer);
2. 获取state的值:getState()
3. 派发动作:dispatch(action)
4. 注册监听:subscribe() 当产生新的 state 时,自动调用
- 简化版:
Redux 的流程
- store 通过 reducer 创建了初始状态
- view 通过 store.getState() 获取到了 store 中保存的 state,挂载在了自己的状态上
- 用户产生了操作,调用了actions 的方法
- actions 的方法被调用,创建了带有标识性信息的action
- actions 将 action 通过调用 store.dispatch 方法发送到了reducer
- reducer 接收 到 action 并根据标识信息判断之后返回了新的 state
- store 的 state 被 reducer 更新为新的 state 的时候,store.subscribe 方法里的回调函数会执行,此时就可以通知 view 去重新获取 state