smox再更新，增加react-hooks支持，顺便实现一个hook版本的redux

大家好，这里是吸管(⊙o⊙)… 前几个月一直忙于c站（clicli弹幕网）的业务逻辑，所以几乎消失了 然后，直到前几天，react-hooks 出来后，才更新了 smox

react-hooks 的使用我就不多说啦，有其他文章

其实如果算到 smox 上，也就是状态管理，有波动的 API 就是 useReducer 了

const [state, dispatch] = useReducer(reducer,state)
复制代码

可以看到返回一个数组，我们来试着实现它：

export const useReducer = (initState, reducer) => {

  const [state, setState] = useState(initState)

  const dispatch = (action, payload) => {

    let newState = reducer(state, action)

    if (newState !== state) {
      setState(newState)
    }
  }
  return [state, dispatch]
}
复制代码

没错，短短几行，搞定了这个 API，连源码都不用看(⊙o⊙)… 然后 smox 也是这个道理，对比 useReducer，smox 也对应实现了 useSmox，如下：

import React from 'react'
import { useSmox } from 'smox'

const mutations = {
  change(state) {
    state.sex = state.sex === 'boy' ? 'girl' : 'boy'
  }
}

const actions = {
  asyncChange({ commit }, payload) {
    setTimeout(() => {
      commit('change', payload)
    }, 1000)
  }
}

const state = {
  sex: 'boy'
}

export const Sex = () => {

  const [state, commit, dispatch] = useSmox(state, mutations, actions)
  
  return (
    <div>
      <h1>{state.sex}</h1>
      <button onClick={() => commit('change')}>变性</button>
      <button onClick={() => dispatch('asyncChange')}>异步变性</button>
    </div>
  )
}
复制代码

实现这个 API 的同时，smox 仍然提供了 vuex 的代码体验和 proxy，而且还支持 model 机制的拆分

当然，还是没用多少行代码√

总结

这次 smox 针对 react-hooks 的更新，可以预见的是，将来将会出现 function 组件和 class 组件两派，并且后者会被前者满满取代。 未来将会出现大量的 useXxx 来拓展组件

最后奉上 smox 的 github 地址::>_<:: 老铁们！还差八颗星星啦！

github.com/132yse/smox

欢迎试用与 star ！