04.状态重置

状态重置

以下模式可用于将状态重置为其初始值。

import { create } from "zustand";

// define types for state values and actions separately
type State = {
  salmon: number;
  tuna: number;
};

type Actions = {
  addSalmon: (qty: number) => void;
  addTuna: (qty: number) => void;
  reset: () => void;
};

// define the initial state
const initialState: State = {
  salmon: 0,
  tuna: 0,
};

// create store
const useSlice = create<State & Actions>()((set, get) => ({
  ...initialState,

  addSalmon: (qty: number) => {
    set({ salmon: get().salmon + qty });
  },

  addTuna: (qty: number) => {
    set({ tuna: get().tuna + qty });
  },

  reset: () => {
    set(initialState);
  },
}));

一次重置多个 store:

import { create: _create, StateCreator } from 'zustand'

const resetters: (() => void)[] = []

export const create = (<T extends unknown>(f: StateCreator<T> | undefined) => {
  if (f === undefined) return create
  const store = _create(f)
  const initialState = store.getState()
  resetters.push(() => {
    store.setState(initialState, true)
  })
  return store
}) as typeof _create

export const resetAllStores = () => {
  for (const resetter of resetters) {
    resetter()
  }
}

使用切片模式重置绑定的 store:

import create, { StateCreator } from "zustand";

const resetters: (() => void)[] = [];

const initialBearState = { bears: 0 };

interface BearSlice {
  bears: number;
  addBear: () => void;
  eatFish: () => void;
}

const createBearSlice: StateCreator<
  BearSlice & FishSlice,
  [],
  [],
  BearSlice
> = (set) => {
  resetters.push(() => set(initialBearState));
  return {
    ...initialBearState,
    addBear: () => set((state) => ({ bears: state.bears + 1 })),
    eatFish: () => set((state) => ({ fishes: state.fishes - 1 })),
  };
};

const initialStateFish = { fishes: 0 };

interface FishSlice {
  fishes: number;
  addFish: () => void;
}

const createFishSlice: StateCreator<
  BearSlice & FishSlice,
  [],
  [],
  FishSlice
> = (set) => {
  resetters.push(() => set(initialStateFish));
  return {
    ...initialStateFish,
    addFish: () => set((state) => ({ fishes: state.fishes + 1 })),
  };
};

const useBoundStore = create<BearSlice & FishSlice>()((...a) => ({
  ...createBearSlice(...a),
  ...createFishSlice(...a),
}));

export const resetAllSlices = () => resetters.forEach((resetter) => resetter());

export default useBoundStore;
上一页