English | 简体中文

zustand-utils

简介

一些 zustand 的工具函数

createContext

zustand v4 中废弃的 createContext 的替代方法。（详情： #1276）

import create from 'zustand'
import { createContext } from 'zustand-utils'

const { Provider, useStore } = createContext()

const createStore = () => create(...)

const App = () => (
  <Provider createStore={createStore}>
    ...
  </Provider>
)

const Component = () => {
  const state = useStore()
  const slice = useStore(selector)
  ...

典型用例

createContext

createContext 在组件中的用法

出处： zustand-v3-create-context.md

import create from 'zustand';
import { createContext } from 'zustand-utils';

// 最佳实践：你可以将下面的 createContext() 和 createStore 移动到一个单独的文件（store.js）中，并在需要的地方导入 Provider，useStore。
const { Provider, useStore } = createContext();

const createStore = () =>
  create((set) => ({
    bears: 0,
    increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
    removeAllBears: () => set({ bears: 0 }),
  }));

const Button = () => {
  return (
    // 每次使用 Button 组件都会创建自己的 store 实例，而不是所有组件使用同一个 store。
    <Provider createStore={createStore}>
      <ButtonChild />
    </Provider>
  );
};

const ButtonChild = () => {
  const state = useStore();
  return (
    <div>
      {state.bears}
      <button
        onClick={() => {
          state.increasePopulation();
        }}
      >
        +
      </button>
    </div>
  );
};

export default function App() {
  return (
    <div className="App">
      <Button />
      <Button />
    </div>
  );
}

createContext 的初始化 props 用法

出处： zustand-v3-create-context.md

import create from 'zustand';
import { createContext } from 'zustand-utils';

const { Provider, useStore } = createContext();

export default function App({ initialBears }) {
  return (
    <Provider
      createStore={() =>
        create((set) => ({
          bears: initialBears,
          increase: () => set((state) => ({ bears: state.bears + 1 })),
        }))
      }
    >
      <Button />
    </Provider>
  );
}

使用 createContext 将应用转化为组件

createContext 最常见的用法是将应用程序重构为组件，步骤如下：

1. 创建一个没有 context 的 App store：

// store.ts
import create from 'zustand';

export const useStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}));

应用中的组件使用 useStore 来消费 store：

// Component.ts

import { useStore } from './store';

const ButtonChild = () => {
  const state = useStore();
  return (
    <div>
      {state.bears}
      <button
        onClick={() => {
          state.increasePopulation();
        }}
      >
        +
      </button>
    </div>
  );
};
export default ButtonChild;

2. 只需要将 App 包裹在 createContext 中，不需要重构任何子组件中的代码，就可以将应用转为组件：

// store.ts
import create from "zustand";

+ const createStore = ()=> create((set) => ({
- export const useStore =  create((set) => ({
    bears: 0,
    increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
    removeAllBears: () => set({ bears: 0 })
  }));

+ const { Provider, useStore } = createContext();

+ export { Provider, useStore ,  createStore }

// Wrapper.tsx

import { createStore, Provider } from './store';

const Wrapper = () => {
  return (
    <Provider createStore={createStore}>
      <ButtonChild />
    </Provider>
  );
};

这样它就变成了一个组件，可以被其他任何应用消费。

createStoreUpdater

createStoreUpdater 是一个用于更新 Store 中指定 key 的值的函数。

参数

createStoreUpdater 接收一个 StoreApi 对象作为参数，该对象包含了一些操作 Store 的方法，如 getState、setState、subscribe 和 destroy。

createStoreUpdater 返回一个函数，该函数接收以下参数：

• key：需要更新的 Store 中的 key；
• value：需要更新的值；
• deps：依赖项数组，默认为 [value]；
• setStoreState：一个可选的回调函数，用于更新 Store 状态，默认为 storeApi.setState。

返回值

createStoreUpdater 返回一个函数，该函数用于更新 Store 中指定 key 的值。

示例

import { createStoreUpdater } from 'path/to/createStoreUpdater';
import { useStore } from 'path/to/useStore';

interface User {
  name: string;
  age: number;
}

const storeApi = useStore<User>({ name: '', age: 0 });
const updateUser = createStoreUpdater(storeApi);

// 更新 name
updateUser('name', 'John Doe');

// 更新 age
updateUser('age', 18);

在上面的示例中，我们首先使用 useStore 创建了一个 Store，然后使用 createStoreUpdater 创建了一个更新器 updateUser，最后通过调用 updateUser 来更新 Store 中的 name 和 age。

License

MIT