乐趣区

HooX-基于Hook的React状态管理工具

为什么又要造轮子

hook 自带轮子光环

关于 react hook 我就不多介绍了。hook 提供了抽象状态的能力,自然而然让人想到可以基于 hook 抽离全局状态。其天生自带轮子光环,所以社区也出现了不少基于 hook 的状态管理工具,比如说前阵子飞冰团队出的 icestore,亦或者这个 stamen,不过相对来说我更喜欢的还是这个 unstated-next。

那既然别人都已经造了那么多轮子了,为什么自己还要造呢?自然是因为:

别人的轮子不够用

比如说 unstated-next,它本质上是把一个自定义 hook 全局化了。理念很好,可惜颗粒度太大了一点。必须把 state、actions、effects 维持在一个自定义 hook 中。内部的一系列 actions、effects 需要加 useCallback、useMemo 也比较麻烦,如果抽离到外部,又要传很多参数,写 TS 的话,还要写不少泛型。总之,如果项目相对比较复杂,写起来比较累。

stamen 其实也不错。声明一个 store,包含 state、reducer、effects。而且不需要给组件包裹 Provider,各个地方随意拔插,响应更新。就是 dispatch 我不太喜欢用,不太好直接定位到 action 或 effect 的声明,且丢了入参出参类型。

icestore 的问题也差不多。说是支持 TS,其实是残缺的,看了下源码,类型完全都丢失了。另外命名空间这一套我也不是很喜欢。

当然上述这些问题人家也能优化。但是何必呢,本来也没几行代码,给人家提 PR 的时间,我自己都写好轮子了。所以总而言之,还是自己造吧。

我的理想型

那我自己想要的状态管理工具是怎么样的呢?在 hoox 之前呢,其实我还实现了一版,基本复制 dva 的 api 的一个版本(把 yield 换成 async/await)。有点儿像 icestore,只不过没有命名空间。最致命且无法解决的问题就是丢失了类型,丢失了函数引用。

后来我总结了一下,我真正想要的是怎么样的:

  1. 全局状态管理,且非单一 store;
  2. actions 跟 effects 就是正常的函数,独立声明,直接引用;
  3. 完美的 TS 支持。

所以目标很简单,可以说就是 unstated-next 的去 hook 包裹版。于是我实现了一版,最终效果如下:

HooX

创建全局状态

// store.js
import createHoox from 'hooxjs'

// 声明全局初始状态
const state = {count: 1}

// 创建 store
export const {setHoox, getHoox, useHoox} = createHoox(state)

// 创建一个 action
export const up = () => setHoox(({ count}) => ({count: count + 1}))

// 创建一个 effect 
export const effectUp = () => {const [{ count}, setHoox] = getHoox();
  const newState = {count: count + 1}
  return fetch('/api/up', newState).then(() => setHoox(newState))
  // 或者直接引用 action
  // return fetch('/api/up', newState).then(up)
}

消费状态

import {useHoox, up, effectUp} from './store';

function Counter() {const [state] = useHoox()
  return (
    <div>
      <div>{state.count}</div>
      <button onClick={up}>up</button>
      <button onClick={effectUp}>effectUp</button>
    </div>
  )
}

直接修改状态

import {useHoox} from './store';

function Counter() {const [state, setHoox] = useHoox()
  return (
    <div>
      <div>{state.count}</div>
      <input
        value={state.count}
        onChange={value => setHoox({ count: value})}
      /
    </div>
  )
}

重置状态

我们知道,在 class 组件中,通过 this.setState 是做状态的合并更新。但是在 function 组件中,useState 返回的第二个参数 setState 又是做替换更新。实际使用中,其实我们都有诉求。尤其是非 TS 的项目,状态模型可能是动态的,很可能需要做重置状态。为了满足所有人的需求,我也加了个 api 方便大家使用

import {useHoox} from './store';

function Counter() {const [state, setHoox, resetHoox] = useHoox()
  return (
    <div>
      {state ? <div>{state.count}</div> : null}
      <button onClick={() => resetHoox(null)>reset</button>
    </div>
  )
}

全局 computed

通过上述 api,其实我们还可以实现类似 vue 中 computed 的效果。

import {useHoox} from './store';

export function useDoubleCount () {const [{ count}] = useHoox();
  return count * 2
}

对于某些非常复杂的运算,我们也可以使用 react 的 useMemo 做优化。

import {useHoox} from './store';

export function usePowCount (number = 2) {const [{ count}] = useHoox();
  return useMemo(() => Math.pow(count, number), [count, number])
}

除此外,也可以实现一些全局 effect。

不够美好的地方

需要 Provider

hoox 底层基于 context 跟 useState 实现,由于把状态存在 context 了中,故而类似 Redux,消费状态的组件必须是相应 Context.Provider 的子孙组件。如:

import {Provider} from './store';
import Counter from './counter';

function App() {
  return <Provider>
    <Counter />
  </Provider>
}

这进而导致了,如果一个组件需要消费两个 store,那就需要成为两个 Provider 的子孙组件。

hoox 提供了一个语法糖 createContainer,可以稍微的简化一下语法。

import {createContainer} from './store';
import Counter from './counter';

function App () {return <Counter />}
  
export default createContainer(App)

其他不好的地方

留给评论区

Github

具体的源码跟 api 介绍可以见 github:https://github.com/wuomzfx/hoox

关于源码部分我就不详细说明啦,也没几行代码,看看就能明白。

退出移动版