Redux
概念
redux是专门用于集中式管理状态的javascript库,他并不是react的插件库,但却是react中使用最多的状态管理库。
工作流程
在我们了解redux的工作流程之前我们应该要知道redux有三个核心概念,分别为actions、store、reducers(带s的表明可能存在多个)
actions
actions英文直译过来就是行动、动作的意思,那么我们就可以猜到他表示的是“怎么做”,简单来说actions就是一个对象,actions里面有两个属性分别为type和data:
type:标识属性,值为字符串且唯一,必要属性(你想要做什么事情
data:数据属性,值为任意类型,可选属性(你要做事情的数据
那我们浅浅举个栗子:比如计算器你可以进行加1减2等操作,那么加减乘除这个操作就是你的type,数字就是你的数据
store
store==有且只能有一个==,他相当于一个最高指挥家,他负责把action动作交给对应的reducer进行执行,也就是说将state、action和reducer联系在一起的对象。
reducer
reducer用于将store发过来的action完成并将结果返回给store,他接收两个参数preState(旧状态)和action(动作)并返回一个newState(新状态)。
比如像计算器我们需要在原来的数据上进行加1的操作,那么旧状态旧对应原来的数据,action对应加1的操作,返回的新状态就是计算器加完之后重新返回的结果。
工作流程如下:
flowchart LR
Action --> Reducer --> Store --> View --> Action
注意:
reducer返回store的过程中强调的是纯函数,数据是不可突变的,所以项目中切记在reducer中一定不能直接修改store
Mobx
应用流转图
flowchart LR
传入 --事件--> Actions --修改--> State --更新--> Computedvalues --触发--> Reactions --事件调用-->Actions
在Action中可以直接修改state,这也意味着在Mobx中状态是突变的,这种突变修改state的方式和vue是一样的