Connecting Zustand to Redux devtools

devtools middleware in Zustand is used to connect with redux devtools
When devtools middleware is used in a Zustand store, we need to pass all four generics.

  1. State type - CurrentState
  2. State setter type with the state type - SetState
  3. State getter type with the state type - GetState
  4. Middleware type with the state type - StoreApiWithDevtools

The second parameter that is passed to the devtools middleware is an object with the name property that is used to identify the store.

export type CurrentState = {
  items: Array<string>;
  addItem: (item: string) => void;

export const useEventsStore = create<
    (set) => ({
      items: [],
      addItem: (item) => set((state) => ({ items: [...state.items, item] })),
      name: 'My Items',