如何在Zustand中调用多action后让React仅触发一次渲染？

核心思路是把状态修改逻辑和set调用解耦，或者用批量更新机制，既保留单独调用actionA/actionB的能力，又能在mainAction里只触发一次渲染。

方案1：抽离纯修改函数（推荐） #

把actionA和actionB里的状态修改逻辑抽成独立的纯函数，只负责操作Immer的draft对象，不直接调用set。这样不管是单独触发动作，还是合并触发，都能复用逻辑：

// 抽离纯修改逻辑，只处理draft，不涉及Zustand的set
const modifyStateA = (draft) => {
  // 原来actionA里的修改逻辑，比如：
  draft.count += 1;
  draft.user.name = "updated";
};

const modifyStateB = (draft) => {
  // 这里可以直接基于modifyStateA修改后的draft操作
  draft.count *= 2;
  draft.user.age += 5;
};

// 创建store
const useStore = create((set, get) => ({
  // 保留独立的actionA和actionB，内部调用纯函数+set
  actionA() {
    set(produce(modifyStateA));
  },
  actionB() {
    set(produce(modifyStateB));
  },
  // mainAction里一次set，连续执行两个修改逻辑
  mainAction() {
    set(produce((draft) => {
      modifyStateA(draft);
      modifyStateB(draft);
    }));
  }
}));

这种方式的优势：

• 逻辑复用性拉满，modifyStateA/modifyStateB可以在任何需要的地方调用
• 真正的单次状态更新，只触发一次组件渲染
• 代码结构更清晰，职责划分明确

方案2：手动批量更新 #

如果不想重构现有逻辑，可以用React的批量更新API，把两次set调用包裹起来，让React合并渲染操作：

import { batch } from 'react';

const useStore = create((set, get) => ({
  actionA() {
    set(produce(state => { /* 原有修改逻辑 */ }));
  },
  actionB() {
    set(produce(state => { /* 原有修改逻辑 */ }));
  },
  mainAction() {
    batch(() => {
      get().actionA();
      get().actionB();
    });
  }
}));

这种方式的注意点：

• 本质还是两次set调用，只是React合并了渲染，最终只触发一次更新
• 仅适用于同步调用的场景，如果是异步操作（比如await之后调用），批量可能不生效
• 代码侵入性小，不需要改动原有actionA/actionB的逻辑

方案3：合并Immer produce调用（不推荐） #

如果不想抽离函数，也可以直接在mainAction的set里连续执行两次produce的修改逻辑，但这种方式会导致代码重复，后续修改actionA/actionB时需要同步更新mainAction，维护成本高：

mainAction() {
  set((state) => produce(state, (draft) => {
    // 复制actionA里的修改逻辑
    draft.someKey = "valueA";
    // 复制actionB里的修改逻辑（基于修改后的draft）
    draft.anotherKey = draft.someKey + "_B";
  }));
}

内容的提问来源于stack exchange，提问作者dvjanm