zustand 传值

zustand版本号     "zustand": "4.4.6"

组件传值很方便(相对于没关系的组件和多层组件)

userInfo.ts

import { StoreApi } from 'zustand';

type userInfoStoreType = {
  login: string;
  setLogin: (v: string) => void;
  buttonPermission: boolean;
  setButtonPermission: (v: boolean) => void;
};

const userInfoStore = (set: StoreApi<userInfoStoreType>['setState']) => ({
  //右上角中文登录名
  login: '',
  setLogin: (login: string) => set({ login }),
  //按钮权限
  buttonPermission: false,
  setButtonPermission: (buttonPermission: boolean) => set({ buttonPermission }),
});
export default userInfoStore;

zustand切片管理 (统一管理)

//切片页面
import { create } from 'zustand';
//信息系统管理
import ISManagementStore from './ISManagementStore';
//推送服务
import PushServiceStore from './pushServiceStore';
//登录信息
import userInfoStore from './userInfo';
//权限配置 -信息系统权限
import limitsOfAuthorityStoreType from './admin/limitsOfAuthorityStore';
type allType = ReturnType<typeof ISManagementStore> &
  ReturnType<typeof PushServiceStore> &
  ReturnType<typeof userInfoStore> &
  ReturnType<typeof limitsOfAuthorityStoreType>;

const useStore = create<allType>((set) => {
  return {
    ...ISManagementStore(set),
    ...PushServiceStore(set),
    ...userInfoStore(set),
    ...limitsOfAuthorityStoreType(set),
  };
});
export default useStore;

使用的时候只需要引用useStore就可以(因为切片管理了)

import useStore from 'common/hooks/store';
//引入需要使用的值
const { login,setLogin } = useStore();
//设置值
setLogin("你的值")
//使用值
<>{login}</>

使用immer 以及set方法
    "immer": "10.0.3",
    "zustand": "4.5.1"

import { create } from "zustand";
import { immer } from "zustand/middleware/immer";

type TCatStoreState = {
  cats: {
    bigCats: number;
    smallCats: number;
  };
  increaseBigCats: (v: number) => void;
  increaseSmallCats: () => void;
  summary: () => void;
};

export const useCatStore = create<TCatStoreState>()(
  immer((set, get) => ({
    cats: {
      bigCats: 0,
      smallCats: 0,
    },
    increaseBigCats: (v) =>
      set((state) => {
        state.cats.bigCats += v;
      }),
    increaseSmallCats: () =>
      set((state) => {
        state.cats.smallCats += 1;
      }),
    summary: () => {
      const total = get().cats.bigCats + get().cats.smallCats;
      return `共${total}只猫`;
    },
  }))
);

createWithEqualityFn 和create 的区别是什么

createWithEqualityFn 和 create 都是用于创建 Zustand store 的方法，它们之间的主要区别在于状态更新的比较方式。

1. create： 这是 Zustand 默认提供的创建 store 的方法。它使用 JavaScript 的严格相等运算符（===）来比较前后两次状态的变化。这意味着只有当状态的引用发生变化时，组件才会重新渲染。

   import create from 'zustand';
   
   const useStore = create((set) => ({
     count: 0,
     increment: () => set((state) => ({ count: state.count + 1 })),
   }));

2. createWithEqualityFn： 这个方法允许你提供一个自定义的比较函数，用于比较前后两次状态的变化。这使得你可以根据自己的需求来决定何时触发组件的重新渲染。这在处理复杂状态或特定需求的场景中非常有用。

import { createWithEqualityFn } from 'zustand/traditional';

const useStore = createWithEqualityFn(
  (set) => ({
    count: 0,
    increment: () => set((state) => ({ count: state.count + 1 })),
  }),
  (oldState, newState) => {
    // 自定义比较函数
    return oldState.count === newState.count;
  }
);

总的来说，createWithEqualityFn 提供了更灵活的方式来定义状态更新的比较逻辑，而 create 则提供了一个简单直接的默认方式。在大多数情况下，你可以使用 create 创建 store，但在特定情况下，比如需要精细控制状态更新时机的情况下，你可能会选择使用 createWithEqualityFn。

shallow 浅函数

import React from "react";
import { useCatStore } from "@/store/catStore";
import { Button } from "antd";
import { shallow } from "zustand/shallow";
export default function SmallCat() {
//使用shallow 只改变应该改变的值，优化程序
  const [increaseBigCats] = useCatStore(
    (state) => [state.increaseBigCats],
    shallow
  );
  return (
    <>
      <h1>小猫</h1>
      <Button onClick={() => increaseBigCats(2)}>增加大猫</Button>
      {Math.random()}
    </>
  );
}