hox 状态调试神器

时间:2021-1-8 作者:admin

背景

博主最近对 React 状态管理异常喜欢,前段时间也写了个 redux 中间件: rc-redux-model,但是已经被 hook 黑化,有没有 hook 写法,就能做到状态管理?于是了解到了 : hox

如果你对 hox 不了解,可以前往官方网站了解一波,如果你想了解 hox 源码,可以看这篇文章hox 源码解读。那么从官方中,我们可以得到 Hox 的相关介绍:下一代的 React 状态管理器,只存在一个 API,那就是 createModel

真香,于是去把 hox 源码读了一遍之后,在实际落地后,我发现,其他问题都可以避免/解决,但是很蛋疼的莫过于 : 无 dev tools 支持,你想想,我们使用了 createModel 包裹之后,如何知道这个数据是否真的被持久化、全局共享呢 ?

常规操作就是,在组件中 import 这个数据源,然后 console.log 打印看看,还有一种情况,那就是项目有其他小伙伴接手了,然后他想查看下目前全局共享的状态有哪些,怎么办?

官方 issues 也有人问到了此问题,同时我们项目中,有些小型项目或者独立模块,都有用到了 hox,于是,我决定先写一个简易版的 devtools,凑合着用,所以 sugar-hox-devtools 出现了…

经过邮件询问 umi/hox 的开发者之一 brickspert ,在征得同意后,博主 fork 仓库,然后进行源码修改,写了一个 npm 包。

最终效果

hox 状态调试神器

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。