zustand状态管理器使用汇总

1. 初步使用介绍

// 1. 安装zustand
npm install zustand

// 2. 创建store使用
import { create } from "zustand";
export const useBearStore = create((set) => ({
  bears: 0, 
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })), 
  removeAllBears: () => set({ bears: 0 }),
}));

// 3. 组件内使用
import {useBearStore} from './store/index.js';

function App() {
  // 不建议的写法：（除非状态都要使用到，否则建议使用下方写法，理由是会一直触发渲染导致性能差）
  // const {bears, increasePopulation} = useBearStore();

  // 支持写法
  const bears = useBearStore(state => state.bears);
  const increasePopulation = useBearStore(state => state.increasePopulation);

  const handleClick = () => {
    increasePopulation();
  }
  return (
    

      {bears}
      按钮
    
  );
}

export default App;

2. zustand内get与set使用

// 1. store
import { create } from "zustand";
export const useBearStore = create((set, get) => ({
    bears: 0,
    count: 0,
    increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
    increaseCount: () => set((state) => ({ count: state.count + 1 })),
    removeAllBears: () => set({ bears: 0 }),
    total: () => {
        // get()可以获取到state状态里的数据
        return get().bears + get().count
    }
}));

// 2. 组件使用

import { useBearStore } from './store/index.js';

function App() {
  const bears = useBearStore(state => state.bears);
  const count = useBearStore(state => state.count);
  // 使用set使bears+1
  const increasePopulation = useBearStore(state => state.increasePopulation);
  // 使用set使count+1
  const increaseCount = useBearStore(state => state.increaseCount);
  // 使用get获取bears+count
  const total = useBearStore(state => state.total);


  const handleClickBears = () => {
    increasePopulation();
  }
  const handleClickCount = () => {
    increaseCount();
  }

  return (
    

      
{bears}
      
{count}
      按钮bears
      按钮count
      {/* 汇总 */}
      
{total()}
    
  );
}

export default App;

3. selector使用

// 1. 创建一个ts文件
import { StoreApi, UseBoundStore } from 'zustand'

type WithSelectors = S extends { getState: () => infer T }
  ? S & { use: { [K in keyof T]: () => T[K] } }
  : never

const createSelectors = >>(
  _store: S
) => {
  let store = _store as WithSelectors
  store.use = {}
  for (let k of Object.keys(store.getState())) {
    ;(store.use as any)[k] = () => store((s) => s[k as keyof typeof s])
  }

  return store
}

export default createSelectors;

// 2. store使用
import { create } from "zustand";
import createSelectors from './index.ts';

// 在store内使用
export const useBearStore = createSelectors(create((set, get) => ({
    bears: 0,
    count: 0,
    increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
    increaseCount: () => set((state) => ({ count: state.count + 1 })),
    removeAllBears: () => set({ bears: 0 }),
    total: () => {
        // get()可以获取到state状态里的数据
        return get().bears + get().count
    }
})));

// 3. 组件内使用，提高性能
import { useBearStore } from './store/index.js';

// count发生改变时这个组件才会渲染， 否则不会， 增加性能
function Child() {
  const count = useBearStore(state => state.count);
  return (
    

      
{count}
      
{Math.random()}
    
  )
}

// 单独在组件内使用这个selectore
function Some() {
  const { bears, count } = useBearStore();
  const increasePopulation = useBearStore.use.increasePopulation();
  const increaseCount = useBearStore.use.increaseCount();

  const handleClickBears = () => {
    increasePopulation();
  }
  const handleClickCount = () => {
    increaseCount();
  }

  return (
    

      
{bears}
      
{count}
      按钮bears
      按钮count
    
  );
}

// 一定要封装独立组件， 否则使用后也会重复渲染
function App() {
  return (
    

      
      
    
  );
}

export default App;