2021年520前夕。近一年来主要都在做业务,不过对不断提升Coding质量与速度的追求和思考一直没停过。机缘巧合之下,有幸着重花时间完善了一套稳定、易用的状态管理方案。
---被举报分割线---
我去,头一回被举报?打广告?这,[无奈] 那就优化一版。
---被举报分割线---
欢迎Star和订阅我的博客。
作者在工作历程中,由最初用redux,然后到用vuex,再到实验mobx、dva、react hooks甚至是自研工具,最后回归redux。
在此期间,一直在探寻简单易用,并且有完整类型提示的方案。就是当我们输入一两个关键字,IDE自动弹出模型对应dispatch方法,再输入空字符串'',自动提示可能要调用的方法等。日常要写太多状态管理代码,完全没必要敲很多重复内容。
那么重新写一个状态管理库?
redux已经很好用,只是代码略微繁琐,为何要重新写?基于redux封装是否可行?
那是否要集成其他路由、模块化加载和网络请求等模块,让用户通过这个工具做大多数事?
这其实是很多集成式框架做的事。但状态管理本身就是单独一个模块,没必要和其他模块耦合在一起。模块化对于项目未来局部升级和改造要远方便于集成式。
既然讲到了类型推导提示,那么是否只有TypeScript项目才能完美支持?
当然很多类型都是借助TypeScript定义,但如今利用JSDoc注释类型写法也能让JS项目支持类型提示和推导。
是否能兼容已有项目?
只要遵循相应规则,正常情况下都能兼容。
现在的状态管理方案概念是:
model
管理状态state
和更新状态方法methods
使用状态模型的好处是既可以集中式管理状态,同时能够让不同组件实现跨组件共用状态。
同时,每一个状态模型的常用方法可在该模型暴露,以供外界使用。
state
和更新状态方法methods
简化模型的构成元素,只需要状态和更新状态方法。更新状态方法用于处理复杂状态更新,也就是所谓的副作用。
{
name: 'counter',
state: {
count: 0
},
methods: {
add({ state, update }, number) {
update({ count: state.count + number })
}
async delayAdd({ dispatch }, duration, number) {
await new Promise(resolve => setTimeout( () => resolve(), duration ))
dispatch('add', 1)
}
async run({ state, dispatch, getState }) {
console.log('current count', state.count)
await dispatch('delayAdd', 1000, 1)
console.log('count after update', getState().count)
}
}
}
而直接更新某个状态只需通过方案库暴露一个特有更新方法即可。比如:
updateModel('counter', { count: 100 })
这个太重要了,极大加快研发效率。
代码实现地址:
Tredux:https://github.com/tredux-org...
项目只是给个参考,最重要的是这套状态管理方案概念(代码层面可以有各种实现)。
其实封装难度并不大,最难的是如何让它在最简单的用法下,能够覆盖日常业务开发场景。
如果各位大佬觉得这套方案还可以,想用到自己项目甚至是公司项目中,但又不太放心依赖外部库,大可以将源码(一个TS文件)放到项目中单独引用。
现有方案已在业务项目中稳定运行,欢迎各位试用。
当然,这一套简单的状态管理方案只是抛砖引玉,也希望市场上能涌现出更多轻量易用的解决方案,让状态管理更轻松。
感谢你花时间阅读这篇文章。如果你喜欢这篇文章,欢迎点赞、收藏和分享,让更多的人看到这篇文章,这也是对我最大的鼓励和支持!
欢迎通过微信(搜索“苏溪云的博客”或者扫描下方二维码)或Github订阅我的博客。
默认uni-app打包出来的H5在Android上是没法播放.m3u8直播流的,控制台或报错 Unc...
CSS 是样式、布局和表示的领域。它充斥着颜色、大小和动画。但是你知道吗,它还...
一只小奶狗会有名字、品种以及一堆可爱的特点作为其属性。如果将其建模为一个类...
qq空间有欢迎动画,想要给网页制作一个开场动画效果,该怎么制作呢?下面我们就...
前言 现在不管是桌面客户端还是移动客户端,都会夹杂着一部分H5页面,这种混合式...
css-vars-ponyfill 通过css变量来实现网页换肤的过程中,会出现兼容性问题。 为...
企业内部H5微应用开发 分为 服务端API和前端API的开发,主要涉及到进入应用免登...
大家都知道网页中必须要有图片,那么具体的该如何在网页设计中加入图片呢?下面...
一、反常的SQL语句 某周四午休时分,我正在工位上小憩,睡梦中仿佛看到了自己拿...
至上一回分解完淘宝详情页( 点击查看 )后,再写了一篇关于商城基础模板装修首页...