How to handle more than one zustand store into the browser devtools

When using Zustand for state management, you can effectively manage and debug multiple stores in the browser's DevTools through several steps. Below is my general workflow for handling multiple Zustand stores:

1. Set Store Logging

First, ensure that logging is enabled when creating each Zustand store. This can be achieved using Zustand middleware, such as redux-devtools-extension to track state changes:

javascript
import create from 'zustand'
import { devtools } from 'zustand/middleware'

const useStore = create(devtools((set) => ({
  fishes: 0,
  addFish: () => set((state) => ({ fishes: state.fishes + 1 })),
}), "FishesStore"))

const useUserStore = create(devtools((set) => ({
  users: [],
  addUser: (user) => set((state) => ({ users: [...state.users, user] })),
}), "UsersStore"))

Here, I've specified unique names for each store, such as 'FishesStore' and 'UsersStore', which helps distinguish them in DevTools.

2. View State Changes in DevTools

Using redux-devtools-extension, you can find the Redux tab in Chrome or Firefox Developer Tools. Although Zustand does not inherently depend on Redux, this extension is compatible with Zustand stores that use relevant middleware.

In the Redux tab, you can view snapshots of each state and changes. You can observe state changes triggered by actions, which is very useful for debugging complex state logic.

3. Time Travel Debugging

In Redux DevTools, a useful feature is time travel debugging. You can navigate forward or backward through state changes by selecting different actions, which helps identify where and how state changes occur during debugging.

4. Testing and Validation

During development, I often manually invoke Zustand hooks in the console to observe if the returned values meet expectations, or directly use them within components to observe actual UI behavior.

Real-World Example

Suppose we have a user management interface that uses useUserStore to store the user list. If you encounter issues when adding users, I first check in Redux DevTools whether the addUser action is triggered correctly and if the user list state updates as expected. If the state does not update, I verify that the parameters passed to addUser are correct.

By using these tools and methods, managing and debugging multiple Zustand stores during development can be significantly simplified.