Zustand状态无法重置问题求助：点击按钮无法重置状态

你的问题出在reset方法的实现上，直接调用set(initialState)在多slice组合的场景下可能无法正确合并状态，或者因为对象引用的问题导致状态更新未被触发。

问题分析 #

当你调用set(initialState)时，Zustand会将传入的对象与当前store状态浅合并，但initialState是模块级别定义的固定对象，其中的空数组[]始终是同一个引用——当你通过addSelection创建新数组后，再把旧的空数组引用赋值回去，Zustand的浅比较可能会误判状态未发生变化。

而你提到的嵌套对象store能正常重置，大概率是因为它的reset方法针对嵌套属性做了更新（比如set(state => ({ form: initialState.form }))），这种方式更明确，也更容易触发状态变更检测。

修复方案 #

修改createMediaSelectedSlice中的reset方法，改用函数式更新确保正确合并状态并重置目标属性：

const initialState = {
  selected: [],
};

export const createMediaSelectedSlice: StateCreator<SelectedMediaSlice> = (set) => ({
  ...initialState,
  addSelection: (media: ImageProps) =>
    set((state) => ({
      selected: [...state.selected, media],
    })),
  removeSelection: (media: ImageProps) =>
    set((state) => ({
      selected: state.selected.filter(
        (item) => item.digestId !== media.digestId
      ),
    })),
  reset: () => {
    // 保留其他slice的状态，仅重置当前slice的属性
    set(state => ({ ...state, ...initialState }));
  },
});

或者更直接地重置目标属性，避免依赖initialState的引用：

reset: () => {
  set({ selected: [] });
}

验证 #

修改后点击按钮调用reset，selected数组会被正确重置为空数组，同时不会影响MediaViewSlice中的其他状态。

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