Best practices for store with dynamic slices

[StefanTaxd]

Hi, Im working on creating a store that holds the state of multiple multi step forms (wizard).

I would like to be able to dynamically create the store using slices. This is my slice definition which is pretty trivial.

import { StateCreator } from "zustand";

import { Answer, Answers } from "@/data/schemas/answer";
import { Flow, FlowState } from "@/data/schemas/flow";

export type FlowActions = {
  initialize(
    flowId: string,
    state: FlowState,
    currentQuestionId: string,
    answers: Answers,
  ): void;
  setAnswer(questionId: string, answer: Answer): void;
  setCurrentQuestion(questionId: string): void;
};

export type FlowSlice = Flow & FlowActions;

const createFlowSlice: StateCreator<FlowSlice> = (set) => ({
  id: "",
  state: FlowState.Incomplete,
  currentQuestionId: undefined,
  answers: {},
  initialize: (id, state, currentQuestionId, answers) =>
    set(() => ({
      id: id,
      state: state,
      currentQuestionId: currentQuestionId,
      answers: answers,
    })),
  setAnswer: (questionId, answer) =>
    set((state) => ({
      answers: {
        ...state.answers,
        [questionId]: answer,
      },
    })),
  setCurrentQuestion: (questionId) =>
    set(() => ({
      currentQuestionId: questionId,
    })),
});

export default createFlowSlice;

However for the creation of the overall store I haven not been able to figure out the right approach to integrate this. I know this is not the right way to do it but this is how I've been thinking about it so far - a map of Slices.

interface FlowStore {
  flows: Record<string, FlowSlice>;
  addFlow: (flowId: string, currentQuestionId: string) => void;
}

export const useBoundStore = create<FlowStore>()((set) => ({
  flows: {},
  addFlow: (flowId, currentQuestionId) => {
    const flowSlice = createFlowSlice((updater) =>
      set((state) => ({
        flows: {
          ...state.flows,
          [flowId]: updater(state.flows[flowId]),
        },
      })),
    );

    set((state) => ({
      flows: {
        ...state.flows,
        [flowId]: {
          ...flowSlice,
          id: flowId,
          state: FlowState.Incomplete,
          currentQuestionId,
          answers: {},
        },
      },
    }));
  },
}));

Should I create multiple stores instead? How can I keep track of multiple stores as part of a global store?

Thanks,
Stefan

[dbritto-dev]

@StefanTaxd multiple stores if they are independent if not one store is ok