1

I'm really new to Zustand state management library and I'm using it for a React project with ViteJS. I have two stores using the slice pattern with bounded store to combine them. Is there anyway to view the Zustand states with time travel debugging? I know that I can use Zustand middleware devtools, but that doesn't support combined or multiple stores. I have used a third-party library called zukeeper which is suggested on the official Zustand documentation too.

Here is what I did,

const authStoreSlice = (set) => ({
 userName: null,
 userEmail: null,
 setUserName: (username) => set(() => ({ username })),
 setUserEmail: (userEmail) => set(() => ({ userEmail })),
});
const userStoreSlice = (set) => ({
 users: null,
 setUsers: (users) => set(() => ({ users})),
});

bounded store

import { create } from 'zustand';
import zukeeper from 'zukeeper';

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

But in the Zukeeper extention, it shows all store values together as in a single store. is there anyway I could view them as in Redux devtools view separated into stores which we create?

Drew Reese
  • 165,259
  • 14
  • 153
  • 181

0 Answers0