【zustand】简易使用

安装

npm i zustand

封装

简易 store 文件夹，作为公用状态处理的地方

模拟命名空间

zustand 没有命名空间，用不同的ts作为区分，例如

// createRejudgmentSlice.ts
import { Part } from "./data";

export interface RejudgmentSliceType {
  part: Part | undefined;
  setPart: (part: Part) => void;
}

const initialValue = {
  part: undefined,
}

const createRejudgmentSlice = (set, get) => ({
  // 模拟命名空间
  rejudgment: {
    ...initialValue,
    setPart: (part: Part | undefined) => set((state) => { state.rejudgment.part = part }),
  }
})

export default createRejudgmentSlice;

这里建立 rejudgment 作为一个命名空间，不影响其他模块的公用数据

创建 store

使用 create 创建 store

// index.ts
import { create } from "zustand";

import createRejudgmentSlice, { RejudgmentSliceType } from "./createRejudgmentSlice";
import { immer } from 'zustand/middleware/immer'

interface Store {
  rejudgment: RejudgmentSliceType
}
const useStore = create<Store>()(
  // 使用 immer 处理嵌套问题
  immer((set, get) => ({
    ...createRejudgmentSlice(set, get),
  }))
)

export default useStore;

使用

引入 useStore, 用模拟的命名空间获取到需要的变量切片

import useStore from './store';

const Station = () => {
  const { part, setPart } =  useStore((state) => state.rejudgment);
  return (
    <>
      <Button onClick={() => setPart('test')}>change</Button>
      {part}
    </>
  )
};

export default Station;