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

Question

I am new to Zustand, but right away I've created two stores and I want to be able to see the behavior of both on the browser devtools.

Using

import {devtools} from 'zustand/middleware'

allowed me to have just one store at a time. I tried import {devtools} from '@pavlobu/zustand/middleware' and nothing also zukeeper and nothing.

Answer 1

You can use it in the following way:

const Store1 = create(devtools((set) => ..., { name, store: storeName1 }))
const store2 = create(devtools((set) => ..., { name, store: storeName2 }))

Or you can combine both stores like this:

const useStore = create(
  devtools((...a) => ({
    ...createStoreSlice1(...a),
    ...createStoreSlice2(...a)
  }))
);

I suggest you also read this article About Slices Pattern in Zustand: https://docs.pmnd.rs/zustand/guides/slices-pattern