Zustand多组合仓库时光旅行调试：如何分仓查看状态？

要实现类似Redux DevTools的分仓查看效果，有两种可行方式，可根据你的使用场景选择：

方式一：嵌套模块结构（单Store分模块） #

修改切片定义，将每个模块的状态和方法包裹在单独的命名空间对象中，Zukeeper会自动识别并分块展示：

// 修改auth切片，嵌套到auth对象下
const authStoreSlice = (set) => ({
  auth: {
    userName: null,
    userEmail: null,
    setUserName: (username) => set((state) => ({ 
      auth: { ...state.auth, userName: username } 
    })),
    setUserEmail: (userEmail) => set((state) => ({ 
      auth: { ...state.auth, userEmail } 
    })),
  },
});

// 修改user切片，嵌套到user对象下
const userStoreSlice = (set) => ({
  user: {
    users: null,
    setUsers: (users) => set((state) => ({ 
      user: { ...state.user, users } 
    })),
  },
});

// 组合Store
import { create } from 'zustand';
import zukeeper from 'zukeeper';

const useBoundStore = create(zukeeper((...a) => ({
  ...authStoreSlice(...a),
  ...userStoreSlice(...a),
})));

此时Zukeeper扩展中会显示auth和user两个独立模块，展开后可分别查看各自的状态和操作记录。

方式二：独立Store（多Store分仓） #

如果更倾向于完全独立的分仓效果，直接为每个切片创建独立的Store并分别接入Zukeeper：

// authStore.js
import { create } from 'zustand';
import zukeeper from 'zukeeper';

export const useAuthStore = create(zukeeper((set) => ({
  userName: null,
  userEmail: null,
  setUserName: (username) => set(() => ({ userName: username })),
  setUserEmail: (userEmail) => set(() => ({ userEmail })),
})));

// userStore.js
import { create } from 'zustand';
import zukeeper from 'zukeeper';

export const useUserStore = create(zukeeper((set) => ({
  users: null,
  setUsers: (users) => set(() => ({ users })),
})));

这种方式下，Zukeeper扩展会显示两个独立的Store（useAuthStore和useUserStore），完全对应Redux DevTools的分仓查看体验。组件中需要同时使用两个Store时，直接分别调用对应的hook即可。

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