Zustand TypeScript Slices Pattern

slices.ts

// https://zustand.docs.pmnd.rs/guides/typescript#slices-pattern

export interface UserStore {
  username: string;
  setUsername: (username: string) => void;
}

export interface PreferencesStore {
  darkMode: boolean;
}

const userSlice: StateCreator<UserStore> = (set) => ({
  username: "",
  setUsername: (username) => set((s) => ({ ...s, username })),
});

const preferenceSlice: StateCreator<PreferencesStore> = (set) => ({
  darkMode: false,
});

export interface AppStore extends UserStore, PreferencesStore {}

export const appStore = create<AppStore>()((...a) => ({
  ...userSlice(...a),
  ...preferenceSlice(...a),
}));