English | 简体中文

zustand-utils

简介

一些 zustand 的工具函数

createContext

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

1import create from 'zustand'
2import { createContext } from 'zustand-utils'
3
4const { Provider, useStore } = createContext()
5
6const createStore = () => create(...)
7
8const App = () => (
9  <Provider createStore={createStore}>
10    ...
11  </Provider>
12)
13
14const Component = () => {
15  const state = useStore()
16  const slice = useStore(selector)
17  ...

典型用例

createContext

createContext 在组件中的用法

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

1import create from 'zustand';
2import { createContext } from 'zustand-utils';
3
4// 最佳实践：你可以将下面的 createContext() 和 createStore 移动到一个单独的文件（store.js）中，并在需要的地方导入 Provider，useStore。
5const { Provider, useStore } = createContext();
6
7const createStore = () =>
8  create((set) => ({
9    bears: 0,
10    increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
11    removeAllBears: () => set({ bears: 0 }),
12  }));
13
14const Button = () => {
15  return (
16    // 每次使用 Button 组件都会创建自己的 store 实例，而不是所有组件使用同一个 store。
17    <Provider createStore={createStore}>
18      <ButtonChild />
19    </Provider>
20  );
21};
22
23const ButtonChild = () => {
24  const state = useStore();
25  return (
26    <div>
27      {state.bears}
28      <button
29        onClick={() => {
30          state.increasePopulation();
31        }}
32      >
33        +
34      </button>
35    </div>
36  );
37};
38
39export default function App() {
40  return (
41    <div className="App">
42      <Button />
43      <Button />
44    </div>
45  );
46}

createContext 的初始化 props 用法

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

1import create from 'zustand';
2import { createContext } from 'zustand-utils';
3
4const { Provider, useStore } = createContext();
5
6export default function App({ initialBears }) {
7  return (
8    <Provider
9      createStore={() =>
10        create((set) => ({
11          bears: initialBears,
12          increase: () => set((state) => ({ bears: state.bears + 1 })),
13        }))
14      }
15    >
16      <Button />
17    </Provider>
18  );
19}

使用 createContext 将应用转化为组件

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

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

1// store.ts
2import create from 'zustand';
3
4export const useStore = create((set) => ({
5  bears: 0,
6  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
7  removeAllBears: () => set({ bears: 0 }),
8}));

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

1// Component.ts
2
3import { useStore } from './store';
4
5const ButtonChild = () => {
6  const state = useStore();
7  return (
8    <div>
9      {state.bears}
10      <button
11        onClick={() => {
12          state.increasePopulation();
13        }}
14      >
15        +
16      </button>
17    </div>
18  );
19};
20export default ButtonChild;

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

1// store.ts
2import create from "zustand";
3
4+ const createStore = ()=> create((set) => ({
5- export const useStore =  create((set) => ({
6    bears: 0,
7    increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
8    removeAllBears: () => set({ bears: 0 })
9  }));
10
11+ const { Provider, useStore } = createContext();
12
13+ export { Provider, useStore ,  createStore }

1// Wrapper.tsx
2
3import { createStore, Provider } from './store';
4
5const Wrapper = () => {
6  return (
7    <Provider createStore={createStore}>
8      <ButtonChild />
9    </Provider>
10  );
11};

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

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 的值。

示例

1import { createStoreUpdater } from 'path/to/createStoreUpdater';
2import { useStore } from 'path/to/useStore';
3
4interface User {
5  name: string;
6  age: number;
7}
8
9const storeApi = useStore<User>({ name: '', age: 0 });
10const updateUser = createStoreUpdater(storeApi);
11
12// 更新 name
13updateUser('name', 'John Doe');
14
15// 更新 age
16updateUser('age', 18);

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

License

MIT