Trying to combine two stores

[FlorianGoussin]

Hello,
I'm trying to combine two stores and I tried to implement this solution which seems to work for sepehr500 and I ended up with some errors. I also started this thread on stackoverflow.
Here is my code:

import { create } from 'zustand'
import { temporal } from 'zundo'

const createSelectionStore = create((set) => ({
    selected: [], // selected path indexes
    select: (index) =>
        ...
    deselect: () =>
        ...
}))

const createBikePathStore = create((set) => ({
    paths: [],
    visible: false,
    setPaths: (paths) =>
        ...
    setVisible: (visible) =>
        ...
}))

const useBikePathStore = create((set) => ({
    ...createSelectionStore(set),
    ...createBikePathStore(set),
}))

export default useBikePathStore

I get this error. I first thought I had an issue with Zundo, but as you can see I'm not using the temporal variable anymore and still have the same error.

Could someone help me with that?

I'm probably missing something so I posted this in general.
#228 (comment)

[dbritto-dev]

@FlorianGoussin what you are looking for is the slices pattern https://docs.pmnd.rs/zustand/guides/slices-pattern

The solution

const createSelectionStore = (set) => ({ ... })
const createBikePathStore = (set) => ({ ... })

Note: you shouldn't use create with createSelectionStore and createBikePathStore those are slices, just regular functions

[FlorianGoussin]

I knew I was missing something. It makes sense that create should only be called once.
Thank you very much! It works now! 👍

[Klerith]

What about if you have two slices with the same property or method names?

I'm trying to separate the bound store like this:

interface BoundStore { 
  bearSlice: BearSlice;
  birdSlice: BirdSlice & BirdActions;
};
   
  

export const useBoundStore = create<BoundStore>()((...a) => ({
  bearSlice: createBearSlice(...a),
  birdSlice: createBirdSlice(...a),
}))

I'm struggling to change the state, however, I was able to get the state with no issues.

[dai-shi]

What about if you have two slices with the same property or method names?

I think what you want is "namespacing".
See #178. It's out of the scope of zustand core library, and the scope of third-party libs.

zustand/docs/integrations/third-party-libraries.md

Line 18 in 2be79c9

- [@dhmk/zustand-lens](https://github.com/dhmk083/dhmk-zustand-lens) — Lens support for Zustand.