React中的状态管理


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是一样的


文章作者: 庄荣健
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 庄荣健 !
  目录