Use combine with persist and devtools

[LeoRedin]

Hey folks! I need help on setting here a proper slices middlewares:

If I have the following:

const createBearSlice: StateCreator<
  BearState,
  [['zustand/devtools', never]],
  []
> = (set) => ({
  bears: 0,
  addBear: () => set((state) => ({ bears: state.bears + 1 })),
  eatFish: () => set((state) => ({ fishes: state.fishes - 1 })),
});

const createFishSlice: StateCreator<
  FishState,
  [['zustand/devtools', never]],
  []
> = (set) => ({
  fishes: 0,
  addFish: () => set((state) => ({ fishes: state.fishes + 1 })),
});

const useBoundStore = create<BearState & FishState>()(
  devtools(
    persist(
      (...a) => ({
        ...createBearSlice(...a),
        ...createFishSlice(...a),
      }),
      {
        name: 'bound-store',
      },
    ),
  ),
)

How is the way to add the combine middleware? I want to have an isInitialized state for the whole store to use that with hydration and I think that combine is the way here but I haven't really used a whole lot of middlwares together. Thanks!

[dai-shi]

I don't think combine is something you are looking for. (it was bad naming)

combine might not work well with slice pattern.

For hydration stuff, I hope @dbritto-dev can help.

[LeoRedin]

I have pretty much all the setup done, hydration works fine and everything else is good. My main point is having this unique state for the whole store instead of adding it to a slice. If combine is not what I'm looking for I might as well create an initializedSlice and have it set the properties I need. I don't know if that will work but I can try.

I know with slices I'd be joining them into one so I don't see why it shouldn't work. Thinking about it now it kinda makes sense to have that slice

[dai-shi]

Sorry, I think I missed your point.

having this unique state for the whole store instead of adding it to a slice.

I'm still confused. Can you elaborate please?

[LeoRedin]

I wanted to have on the store that initialized state but I didn't want to add it to a random slice.
I have this here that works fine on another store:

const useApiBoundStore = create<ApiStoreState>()(
  devtools(
    persist(
      (...a) => ({
        ...createAuthStoreSlice(...a),
      }),
      {
        name: 'user-data',
        version: 0,
        skipHydration: true,
        storage: createJSONStorage(() => usePersistence.getState().noop),
        onRehydrateStorage: () => (state) => {
          state?.setInitialised(true);
        },
      },
    ),
  ),
);

See that state.setInitialised? That comes from the slice itself, right now this is the only slice. But I'll have now lets say 10 different slices for something else here. Should I create a initializedSlice?

[LeoRedin]

const useBoundStore = create(
  combine(
    devtools,
    persist(
      (set, get, api) => ({
        ...createDispatchBoardSlice(set, get, api),
      }),
      { name: 'bound-store' }
    ),
    (set, get, api) => ({
      isInitialized: false,
      setIsInitialized: (initialized) => set({ isInitialized: initialized }),
    })
  )
);

I think I was trying to achieve that doing something like this

[dbritto-dev]

@LeoRedin here you go -> https://stackblitz.com/edit/nextjs-and-zustand-persist?file=app%2F_components%2Fhome-page.tsx