​

Zustand Slices (react_ui/src/data/slices/)

​

Files

​

Slice Pattern

export const TransportStateID = 'transport:state';

export interface TransportState {
  bpm: number;
  // ... state fields
  setBpm: (bpm: number) => void;
  // ... actions
}

export const useTransportSlice: StateCreator<TransportState> = (set, get) => ({
  bpm: 120,
  setBpm: (bpm) => set({ bpm }),
});

export const useTransportStore = create<TransportState>()(
  persist((...a) => ({ ...useTransportSlice(...a) }), { name: TransportStateID, ... })
);

​

Design Principles

• One slice per domain — Don’t mix mixer state with transport state. Each slice owns one file and one StateCreator.
• Actions inside the slice — State actions (setters, computed updates) live in the slice, not in components.
• Integer rounding for mixer — setVolume() and setPan() round to integers. This is critical for echo prevention — float precision diffs would cause infinite commit loops.
• Partial merge for engine updates — When the engine pushes state via events, use setState((prev) => ({ ...prev, ...partial })) to avoid overwriting fields the engine side doesn’t know about.
• partialize for persistence — Use the partialize option to exclude transient fields (like initialized) from persistence. Only persist what should survive a reload.