【Redux】简解及工作流程分析

文章目录

    • 一、基本介绍
    • 二、三大原则
    • 三、工作流程图

一、基本介绍

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(不会合并的,自行注意这个坑)
> 一个函数的返回结果只接收其形参的影响,则其就是纯函数

三、工作流程图

  • 完整版:【Redux】简解及工作流程分析_第1张图片

先来个简单版本的:

  • Store 相当于老板
  • Reducers 相当于厨师
  • Action Creators相当于服务员
  • React Component 相当于顾客
  • 打个比方:
  1. 顾客(React Component)想吃点东西,于是就把吃啥告诉了服务员(Action Creators)
  2. 服务员(Action Creators)就用菜单(dispatch)记录(action)下来,点了什么菜(type),和数量(data)。
  3. 然后把菜单( dispatch(action) )交给了老板(Store),老板就根据菜单上的内容,告诉给厨师(Reducers)让他炒什么菜
  4. 厨师(Reducers)收到老板的指示后,迅速的把菜做好。并端给(return newState)老板(Store)。
  5. 菜放到老板这后,老板(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 的流程

  1. store 通过 reducer 创建了初始状态
  2. view 通过 store.getState() 获取到了 store 中保存的 state,挂载在了自己的状态上
  3. 用户产生了操作,调用了actions 的方法
  4. actions 的方法被调用,创建了带有标识性信息的action
  5. actions 将 action 通过调用 store.dispatch 方法发送到了reducer
  6. reducer 接收 到 action 并根据标识信息判断之后返回了新的 state
  7. store 的 state 被 reducer 更新为新的 state 的时候,store.subscribe 方法里的回调函数会执行,此时就可以通知 view 去重新获取 state

你可能感兴趣的