给 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
本文来源:  掘金  如需转载请联系原作者



相关文章
|
4月前
|
前端开发 JavaScript API
探究 React Hooks:如何利用全新 API 优化组件逻辑复用与状态管理
本文深入探讨React Hooks的使用方法,通过全新API优化组件逻辑复用和状态管理,提升开发效率和代码可维护性。
|
5月前
|
前端开发 JavaScript API
利用React Hooks简化状态管理
【10月更文挑战第1天】利用React Hooks简化状态管理
|
5月前
|
存储 前端开发 JavaScript
利用React Hooks简化状态管理
【10月更文挑战第1天】利用React Hooks简化状态管理
60 3
|
5月前
|
前端开发 JavaScript 网络架构
实现动态路由与状态管理的SPA——使用React Router与Redux
【10月更文挑战第1天】实现动态路由与状态管理的SPA——使用React Router与Redux
89 1
|
6月前
|
前端开发 JavaScript API
深入探索React Hooks与状态管理
深入探索React Hooks与状态管理
64 2
|
5月前
|
前端开发 JavaScript
深入理解前端状态管理:React、Redux 和 MobX
【10月更文挑战第7天】深入理解前端状态管理:React、Redux 和 MobX
146 0
|
7月前
|
存储 JavaScript 前端开发
探索React状态管理:Redux的严格与功能、MobX的简洁与直观、Context API的原生与易用——详细对比及应用案例分析
【8月更文挑战第31天】在React开发中,状态管理对于构建大型应用至关重要。本文将探讨三种主流状态管理方案:Redux、MobX和Context API。Redux采用单一存储模型,提供预测性状态更新;MobX利用装饰器语法,使状态修改更直观;Context API则允许跨组件状态共享,无需第三方库。每种方案各具特色,适用于不同场景,选择合适的工具能让React应用更加高效有序。
126 0
|
7月前
|
前端开发 JavaScript API
react 常用的状态管理
【8月更文挑战第29天】react 常用的状态管理
147 1
|
7月前
|
前端开发 JavaScript 算法
深入剖析React状态管理的优势与局限
【8月更文挑战第20天】
178 3
|
7月前
|
存储 前端开发 JavaScript