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?