状态库 zustand 解析

useSyncExternalStore

zh-hans.react.dev/reference/r…

使用 useSyncExternalStore 可以很简单地将一个外部存储通过订阅消费的方式，转换为 react state consumer

zustand

zustand 其实只是一个很简单的模型，核心代码小于100行

其核心是对每个分store构建外部store，也就是

import { create } from 'zustand'

const useBaseStore = create(() => ({
  name: 'zwkang'
}))

这一步实际上是在建立一个外部store

当我们实际使用时

function NameDemo() {
  const name = useBaseStore((state) => state.name)
  return <h1>{name} around here ...</h1>
}

useBaseStore 这一步时再使用 useSyncExternalStore 注册一个对应的 store subscribe consumer

理解起来应该还是很正常的。

zustand 插件

一般数据流的插件化设计与其暴露 api 及其相关。

我们拿简单插件看看 zustand 是如何增强的。

type ImmerImpl = <T>(
  storeInitializer: StateCreator<T, [], []>,
) => StateCreator<T, [], []>

const immerImpl: ImmerImpl = (initializer) => (set, get, store) => {
  type T = ReturnType<typeof initializer>

  store.setState = (updater, replace, ...a) => {
    const nextState = (
      typeof updater === 'function' ? produce(updater as any) : updater
    ) as ((s: T) => T) | T | Partial<T>

    return set(nextState as any, replace, ...a)
  }

  return initializer(store.setState, get, store)
}

export const immer = immerImpl as unknown as Immer

插件的结构类似于

例如我要制作一个logger插件

const zustandLogger = (fn) => (get, set, store) => {
	store.subscribe((state) => console.log(`zustand logger, ${JSON.stringify(state)}`));
  return fn(get, set, store)
}

基本形态如上，基本上 zustand core 做的事情并不多，设计了一套抽象的外部 store api，结合 react store hook 。可以说是最基本最常见的一个 store 提供了。

有问题探讨欢迎交流