How initialize the Slices Pattern store ?

[jefersonjuliani]

I'm working on a project where I'm using Zustand to manage the state of my application. Currently, I have a MainStore responsible for storing all the data and another store that follows the Slice pattern.

When the page initializes, I fetch the data stored in the MainStore and I want to manipulate it using a specific "example" that was created. However, to achieve this, I've realized that I need to initialize it within the useExampleBoundStore. Otherwise, I don't have access to the functions created in "createExample1Slice" and "createExample2Slice", for example.

Here's a simplified outline of the code for reference:

export type MainStoreType = {
  example: ExampleBoundType[];
  addExample: (example: ExampleBoundType) => void;
  getExampleById: (id: string) => ExampleBoundType | undefined;
};

export const useMainStore = create<MainStoreType>()(
  persist(
    (set, get) => ({
      examples: [],
      addExample: (example) => {
        // Implementation
      },
      getExampleById: (id) => get().examples.find((example) => example.id === id),
    }),
    {
      name: 'example-storage',
      storage: createJSONStorage(() => localStorage),
    },
  ),
);

export type ExampleBoundType = { id: string } & Example1SliceType &
  Example2SliceType;

export const useExampleBoundStore = create<ExampleBoundType>((...a) => ({
  id: randomUUID(),
  ...createExample1Slice(...a),
  ...createExample2Slice(...a),
}));

[dbritto-dev]

@jefersonjuliani would you mind sharing us a minimal repro on stackblitz?

[jefersonjuliani]

https://stackblitz.com/edit/vitejs-vite-b88app?file=src%2FApp.tsx

[dbritto-dev]

@jefersonjuliani what you are trying to do is not possible using create since that returns a react function (hook) may is possible using createStore but you need to keep in mind that functions are not serializable. I would just create the initial state without actions and then use that to create an store using createStore but then if you want to use that store you have to use context api in order to make that store available in the tree