给 smox 加上翅膀,不断进步的 react 状态管理-阿里云开发者社区

开发者社区> 我是小助手> 正文

给 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




原文发布时间为:2018年07月03日
原文作者:132
本文来源: 掘金 如需转载请联系原作者



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
消灭“脑细胞杀手”,阿里专家带你深入C++对象的生命周期管理
C/C++的指针一直是令人又爱又恨的特性。围绕指针产生了许许多多优雅的数据结构和系统实现,但又滋生了不少“脑细胞杀手”——内存Bug。如何通过指针管理C++中对象,如何管理对象的生命周期呢?本文中,阿里巴巴高级开发工程师付哲就为大家分享《C++对象的生命周期管理》。
4267 0
一步步打造能手机远程管理的HaaS花卉养植系统
一步步打造能手机远程管理的HaaS花卉养植系统
41 0
深入理解React的组件状态
这几天在阅读徐超老师的《React 进阶之路》,然后在看看自己之前的《React Native移动开发实战》,发现之前我自己的书部分写的比较的浅显,最近打算对基础部分进行升级,加大基础部分,特别是React基础部分的讲解,并对React Native提供的组件部分进行升级。
1081 0
+关注
我是小助手
云栖直播
384
文章
6
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载