在React里,我们知道对于状态的管理分为三种方式
- local state
- context
- 第三方库
在第三方库的选择中,主流的方案有如下三种
- redux
- mobx
- recoil
本篇文章就准备先聊聊redux,废话不多说,开搞!
何为redux
redux是 javaScript应用的状态管理库,提供 可预测化 的状态管理
redux本身不与react绑定,它可以与任意界面库搭配
redux里的核心要素
在redux里,存在三个核心要素
- store,它的作用如下
- 保存应用的state
- 提供 getState 方法获取state
- 提供 dispatch(action) 方法更新state
- 通过 subscribe(listener) 注册监听器
- 通过 subscribe(listener) 返回的函数注销监听器
- action,用于描述应用发生了什么改变,一般是一个 普通对象,也可以通过 actionCreator 函数创建,type 字段是必须的,其余的字段根据自己的需求来添加
- reducer,它是一个 纯函数,用于接收 当前state 以及 action,计算出一个 全新的 state
redux里的三大原则
单一数据源
整个redux应用必须 只有一个 store
state是只读的
在redux的应用中,如果我们想更改state,只能通过 dispatch一个action 的方式来实现,而 不能 直接做修改,这样的设计保证了应用程序的变化是可预测的
reducer必须是纯函数
redux为了使状态修改的过程更加直观且易测试,把reducer设计成了 纯函数,这样我们可以能更加方便且安全地组合使用reducer,而不用担心额外副作用的产生
redux的优势与劣势
在我自己的使用过程中,redux的优势和劣势非常明显,首先列举下优势
- 使程序中的状态变化更加可预测,并且通过 redux-dev-tool 还可以实现“时光倒流”的功能,方便我们复现问题以及排查问题原因
- 可以实现任意层级组件的通信
劣势如下
- 模板代码太多,action const、actionCreator、reducer,这些东西在每一次新增功能时都需要调整,致使在开发过程中,文件切换过于频繁,使人头晕
结语
redux的流行必然有它自己的原因,但随着react版本不断迭代升级,这种繁琐的工具是否还适合未来的项目,这是未知的,但技术本身没有好坏之分,只有合适与不合适,真正的关键在于我们对于项目本身的认知与分析,好啦,就到这啦,over!