zustand-tools 中文文档教程

Question

Zustand 工具

用于通过 react 更简单地使用 zustand 的工具。

安装

npm i zustand-tools

createSimple(initStore, middlewares)

使用正确的类型和挂钩创建一个简单的存储，以便于使用。

import { createSimple } from 'zustand-tools'

const demoStore = createSimple({ foo: 'bar' })
/*
 * will provide:
 * demoStore.useStore.getState().foo
 * demoStore.useStore.getState().setFoo(value)
 * demoStore.hooks.useFoo() => [value, setter] // like useState
 */

const useFoo = demoStore.hooks.useFoo

function App() {
  const [foo, setFoo] = useFoo()

  useEffect(() => {
    setFoo('newBar')
  }, [setFoo])

  return <div>{foo}</div>
}

createSimpleContext(initStore, middlewares)

基本上与 createSimple 相同，但返回一个提供程序以仅将存储用于特定上下文。

initialValues 可用于覆盖创建时提供的 defaultValues。它将与 defaultValues 合并。

import { createSimpleContext } from 'zustand-tools'

const demoStore = createSimpleContext({ foo: 'bar' })

const DemoStoreProvider = demoStore.Provider
const useFoo = demoStore.hooks.useFoo

function Child() {
  const [foo, setFoo] = useFoo()

  useEffect(() => {
    setFoo('newBar')
  }, [setFoo])

  return <div>{foo}</div>
}

function App() {
  return (
    <Provider initialValues={{ foo: 'customBar' }}>
      <Child />
    </Provider>
  )
}

特殊钩子：useAllData()

这个特殊钩子将使用浅比较从存储中返回所有数据。

import { createSimple } from 'zustand-tools'

const demoStore = createSimple({ foo: 1, bar: 2 })
// demoStore.hooks.useAllData() -> { foo: 1, bar: 2 }

添加附加操作

如果需要，您可以向生成的商店添加附加操作。

import { createSimple } from 'zustand-tools'

const { useStore } = createSimple(
  { foo: 1 },
  {
    actions: (set) => ({
      increaseFoo: (amount: number) => set((state) => ({ foo: state.foo + amount }))
    })
  }
)

useStore.getState().increaseFoo(5)

添加中间件

可以通过在第二个参数中将数组作为 middlewares 传递来添加中间件。

import { createSimple } from 'zustand-tools'
import { devtools } from 'zustand/middleware'

const demoStore = createSimple({ foo: 'bar' }, { middlewares: [(initializer) => devtools(initializer, { enabled: true })] })