Merge pull request #52 from jhbruhn/fix/38-store-initialization-side-effects

fix: Remove module-level side effect from useMachineStore initialization

src/App.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from "react";
 import { useShallow } from "zustand/react/shallow";
+import { useMachineStore } from "./stores/useMachineStore";
 import { useMachineCacheStore } from "./stores/useMachineCacheStore";
 import { usePatternStore } from "./stores/usePatternStore";
 import { useUIStore } from "./stores/useUIStore";
@@ -23,6 +24,11 @@ function App() {
     document.title = `Respira v${__APP_VERSION__}`;
   }, []);
 
+  // Initialize machine store subscriptions (once on mount)
+  useEffect(() => {
+    useMachineStore.getState().initialize();
+  }, []);
+
   // Machine cache store - for auto-loading cached pattern
   const { resumedPattern, resumeFileName } = useMachineCacheStore(
     useShallow((state) => ({

src/stores/useMachineStore.ts

@@ -57,6 +57,9 @@ interface MachineState {
   resumeSewing: () => Promise<void>;
   deletePattern: () => Promise<void>;
 
+  // Initialization
+  initialize: () => void;
+
   // Internal methods
   _setupSubscriptions: () => void;
   _startPolling: () => void;
@@ -309,6 +312,11 @@ export const useMachineStore = create<MachineState>((set, get) => ({
     }
   },
 
+  // Initialize the store (call once from App component)
+  initialize: () => {
+    get()._setupSubscriptions();
+  },
+
   // Setup service subscriptions
   _setupSubscriptions: () => {
     const { service } = get();
@@ -421,9 +429,6 @@ export const useMachineStore = create<MachineState>((set, get) => ({
   },
 }));
 
-// Initialize subscriptions when store is created
-useMachineStore.getState()._setupSubscriptions();
-
 // Selector hooks for common use cases
 export const useIsConnected = () =>
   useMachineStore((state) => state.isConnected);