给 smox 加上翅膀,不断进步的 react 状态管理
halo 大家好,我是 132
这段时间,一直沉迷 smox 的迭代,然后又发布新版本了
上一篇文章(查看这里),已经简单阐述了 smox ,文章中也有人提到中间件机制,今天这篇文章可能稍稍复杂些,主要是 smox 两个机制
model 机制
smox 提供 model 机制用于业务逻辑的拆分,应对大型项目
类似的机制同类工具也存在,如 vuex 的 modules、dva 的 model 机制
smox 的 model 机制大概是这样的:
const sex = { state: { sex: 'boy' }, mutations: { change(state, payload) { state.sex = payload } }, actions: { asyncChange({ commit }, payload) { setTimeout(() => { commit('change', payload) }, 1000) } } } const store = new Store({ sex })
可以看到,和 dva 还是神似的,只不过不需要写 namespace,因为 smox 内部做了处理
此时,我们就可以通过store.commit('sex/change')
来直接调用 sex model 下面的 change 方法了
组件内怎样使用呢?
import { map } from 'smox' @map({ state: ['sex/sex'], mutations: ['sex/change'], actions: ['sex/asyncChange'] }) class App extends React.Component { render() { return ( <div> <h1>现在是{this.props.sex}</h1> <button onClick={this.props.change('girl')}>变性</button> <button onClick={this.props.change('girl')}>异步变性</button> </div> ) } } export default App
是的,没有看错,仍然是使用
@map
语法糖,其实单纯实现 dispatch('model/action')
是很简单的,难点就在于封装 map (对应他们的 connect) @connect(({modalName,loading})=>({ modelName, loading:loading.effects['modelName/action], }))
上面这段代码是 dva 的 connect ,不难发现,如果用了 model 机制,这个语法糖就会变得惨不忍睹
而 smox 在这方面还是很重视的,毕竟我是个 API 程序员
好啦,model 机制差不多就这样了,我们来看看中间件机制吧!
中间件机制
所谓的中间件机制,洋葱模型,其实就是 有个 next 函数可以 return 另一个函数
smox 的中间件也是这样,而且和 redux 神似,定制一个 smox 中间件也是同样的:
export const logger = ({state}) => (next) => (mutation,payload) =>{ console.group('before',state) next(mutation,payload) console.log('after', state) console.groupEnd() } const store = new Store({ sex },[logger])
有了中间件,理论上我们就可以做很多事情了
最近迭代出 model 和 middleware 两个机制,也使得 smox 成为更好的状态管理方案
我坚信,smox 的机制、颜值,是目前最合理的方案之一
但是距离成为终极解决方案还需要继续进步!
总结
最后,smox 还会继续努力,欢迎试用与 star
源码地址:参见 github
附上文档: smox-document
原文作者:132
本文来源: 掘金 如需转载请联系原作者

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
面试为什么需要了解JVM
说在前面 如果你经常注意面试题,你会发现现在面试题多多少少会含有jvm相关的面试题,那么为什么现在面试需要了解或者问面试题呢? 主题 谈谈自己的理解,概括为以下几个方面: 的确很重要。 供大于求。 面试风气。 下面就针对这几点谈谈。 的确很重要 随着互联网的发展,高并发高可用、快速响应成为软件的必须,而JVM与这些有着密切关联。之前JVM系列好多都是一些由于STW影响到快速响应问题,忽然网站慢一下(抖动下)等问题,下面谈谈最近通过JVM排查到的高并发高可用问题。(在高可用高并发下面问题原因可能会很多,比如cpu异常高、磁盘IO高、SWAP空间等,有可能很多问题都是综合性的问题) 以前在我的认知里面,如果服务运行有问题,最简单有效快速地办法就是重启,最近遇到了问题打破了我对该方法的认知。 某业务线最近集群服务升级忽然上线上去不能提供服务,之后影响到整个集群,查看当时服务器情况,负载、cpu、io、swap、磁盘等都正常,查看日志就是卡在最后一行不动了(也没有发现OOM,等任何异常)。 如果是之前估计这个问题我也就排查不了了,现在排查问题多了一个维度JVM(的确有时候需要考虑的,并且现在很...
- 下一篇
SpringCloud服务组合
SpringCloud生态强调微服务,微服务也就意味着将各个功能独立的业务抽象出来,做成一个单独的服务供外部调用。但每个人对服务究竟要有多“微”的理解差异很大,导致微服务的粒度很难掌控,划分规则也不统一。这导致的一个问题就是在实现一个业务场景的过程中,无法避免的需要对微服务进行整合。本文提出了一种对微服务进行组合的方案,来解决上述的问题。 其实我觉得微服务的理想化调用方式应该是如图一所示的。在完成某一个具体的功能时,外部应用只需要单独调用对应的service就好了。但现实的情况往往是图二所示的调用方式。外部应用在完成某一项具体功能时,需要并发的调用Service1和Service2然后把二者数据进行汇总,之后再把汇总数据发送给Service3,Service3成功调用意味着此次业务功能完成。简单来说就是需要对微服务进行组装。 图一 图二 微服务的组合其实就是一个DAG图,例如图三,这是一个服务组合,其基本功能是并发调用Service1和Service2,二者结果作为参数调用Service3,调用Service3的同时并发调用Service4,Service3和Service4的结果...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- SpringBoot2整合Redis,开启缓存,提高访问速度
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- CentOS7安装Docker,走上虚拟化容器引擎之路
- CentOS7设置SWAP分区,小内存服务器的救世主
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- MySQL8.0.19开启GTID主从同步CentOS8
- Hadoop3单机部署,实现最简伪集群
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题