背景
我们平时在开发 React 项目中,深深的感受到了 Redux 的“长得丑,用得烦”,有的人去改造它,如 dva、rematch,对 Redux 包装语法糖,也有如 smox ,直接重熔再生,完全摆脱 Redux 的局限的同时,还能拥抱“新特性”
rematch 作者文章里提到,工具质量 = 工具节省的时间 / 使用工具消耗的时间
我们接下来就用这个公式,感受下 smox 的工具质量
简化 API
值得一提,smox 的 API 是和 vuex 一致的,vuex 是一个我认为 API 最好用的状态管理,尽管 vue 被 react 用户所排斥,但是我还是做不到一昧地否定,好就就是好嘛
所以 smox 汲取 vuex 的优点,API 变成了下面的样子:
import React from 'react' import ReactDOM from 'react-dom' import App from './app.js' import { Store, Provider } from 'smox' const state = {
count: 2
}
const actions = {
asyncAdd({ commit }) {
setTimeout(() => {
commit('add')
}, 1000)
}
}
const mutations = {
add(state) {
state.count += 1
},
cut(state) {
state.count -= 1
}
}
const store = new Store({ state, mutations, actions })
ReactDOM.render(
<Provider store = {store}> <App /> </Provider>,
document.getElementById('root')
)
复制代码
感受下,写过 vue 的是不是感觉比较顺眼了呢
事实上,dva、rematch 的 API 也是几乎相同的,只不过 smox 的 mutations 对应它们的 reducers,actions 对应 effects
那几乎相同的 API,到底有什么不同呢?
简单的和 rematch 对比
我们看一下 rematch 的吧:
add(state, payload) {
return state + payload
}
复制代码
它将 state 作为参数传进来,但是 return 的时候改变了参数,这就不是一个纯函数,我们需要手动去优化性能
而 smox 却 使用了 Proxy 的方式,进行对象劫持,不需要 return ,能够精准的劫持变化
add(state, payload) {
state.count += payload
}
复制代码
从这个机制上看,很明显 smox 的方向是对的
除此之外,rematch 还存在好几个问题,比如 无法摆脱 action type 的局限,没有对 connect 进行封装等等
至于 dva ,其实我没仔细研究过它的源码,但是它不能算是一个工具,而是一个框架,我个人不提倡这种的啦~
以上,通过简单的 smox 和 rematch 的对比,直白的感受 smox
除了使用 Proxy 这个新 API 以外,smox 还使用了 New Context API ,这个在 smox 最初就使用了,当时 react16.3 还没有发布√
再比如体积小,还是 rematch ,如果使用它,仍然需要下载 redux 、react-redux 等库,体积是比较臃肿的,但是 smox 完全抛弃 redux,gzipped 1KB
仍需改进
smox 接下来还会进行大版本的改进,比如增加中间件机制
总结
我们在回顾一下公式:工具质量 = 工具节省的时间 / 使用工具消耗的时间
判断下……
最后附上 smox 的 GitHub 地址: https://github.com/132yse/smox
求 star、求 bug、求 issue、求 pr
然后文档地址: https://smox.js.org/
原文发布时间:06月26日
原文作者:132
本文来源掘金如需转载请紧急联系作者