Zustand如何在每个Action执行时自动调用同一函数？

下面提供三种实用方案，帮你避免在每个Action里重复编写请求代码：

方案一：封装带自动请求的自定义Set函数 #

自己封装一个customSet函数，内部整合状态更新和请求逻辑，所有Action直接调用这个函数即可。

import { create } from "zustand";

type State = {
  name: string;
  age: number;
};

type Action = {
  updateName: (name: State['name']) => void;
  updateAge: (age: State['age']) => void
};

const initialState: State = {
  name: 'bob',
  age: 18,
};

// 服务器持久化请求函数
const request = (updatedState: Partial<State>) => {
  // 实际项目替换为真实请求逻辑
  console.log('向服务器发送更新:', updatedState);
  // fetch('/api/save-state', {
  //   method: 'POST',
  //   body: JSON.stringify(updatedState),
  //   headers: { 'Content-Type': 'application/json' }
  // });
};

export const useTempStore = create<State & Action>((set) => {
  // 封装自定义set，自动触发请求
  const customSet = (updater: (state: State) => Partial<State>) => {
    return set((state) => {
      const updatedState = updater(state);
      request(updatedState);
      return updatedState;
    });
  };

  return {
    ...initialState,
    updateName: (name) => customSet(() => ({ name })),
    updateAge: (age) => customSet(() => ({ age })),
  };
});

方案二：使用Zustand中间件 #

利用Zustand的中间件机制，拦截所有Set操作，统一添加请求逻辑，完全解耦业务代码和持久化逻辑。

import { create, Middleware } from "zustand";

type State = {
  name: string;
  age: number;
};

type Action = {
  updateName: (name: State['name']) => void;
  updateAge: (age: State['age']) => void
};

const initialState: State = {
  name: 'bob',
  age: 18,
};

const request = (updatedState: Partial<State>) => {
  console.log('向服务器发送更新:', updatedState);
  // 实际请求逻辑
};

// 定义持久化中间件
const persistMiddleware: Middleware<State & Action> = (config) => (set, get, api) => {
  const originalSet = set;
  // 重写set方法，自动触发请求
  const customSet = (updater: (state: State) => Partial<State>) => {
    return originalSet((state) => {
      const updatedState = updater(state);
      request(updatedState);
      return updatedState;
    });
  };

  return config(customSet, get, api);
};

export const useTempStore = create<State & Action>()(
  persistMiddleware((set) => ({
    ...initialState,
    updateName: (name) => set(() => ({ name })),
    updateAge: (age) => set(() => ({ age })),
  }))
);

方案三：监听状态变化（Subscribe） #

通过Zustand的subscribe方法监听所有状态变更，每次状态更新后自动触发请求，适合需要监听所有状态变化的场景。

import { create } from "zustand";

type State = {
  name: string;
  age: number;
};

type Action = {
  updateName: (name: State['name']) => void;
  updateAge: (age: State['age']) => void
};

const initialState: State = {
  name: 'bob',
  age: 18,
};

const request = (newState: State, oldState: State) => {
  // 对比新旧状态，只发送变更的字段
  const changedFields = Object.entries(newState).reduce((acc, [key, value]) => {
    if (value !== oldState[key as keyof State]) {
      acc[key as keyof State] = value;
    }
    return acc;
  }, {} as Partial<State>);

  if (Object.keys(changedFields).length > 0) {
    console.log('向服务器发送更新:', changedFields);
    // 实际请求逻辑
  }
};

export const useTempStore = create<State & Action>((set) => ({
  ...initialState,
  updateName: (name) => set(() => ({ name })),
  updateAge: (age) => set(() => ({ age })),
}));

// 订阅状态变化，自动触发请求
useTempStore.subscribe((newState, oldState) => {
  request(newState, oldState);
});

方案选型建议 #

• 封装自定义Set：简单直接，适合小型项目或不想引入中间件的场景，代码侵入性低。
• 中间件方式：符合Zustand扩展规范，业务与持久化逻辑完全解耦，适合中大型项目，便于后续扩展其他功能。
• Subscribe方式：适合需要监听所有状态变更的场景，但频繁状态更新时建议添加防抖逻辑，避免重复请求。

内容的提问来源于stack exchange，提问作者Eve-Sama