State Management Deep Dive

Advanced patterns and implementation details of the state management system.

Architecture

StateManager Implementation

Core Pattern

class StateManager {
 #state = new Map();
 #subscribers = new Map();
 #persistence = null;

 constructor() {
  this.#loadInitialState();
 }

 set(key, value) {
  const oldValue = this.#state.get(key);

  // Validate if validator exists
  if (this.#validators.has(key)) {
   const valid = this.#validators.get(key)(value);
   if (!valid) throw new Error(`Invalid value for ${key}`);
  }

  // Update state
  this.#state.set(key, value);

  // Notify subscribers
  this.#notify(key, value, oldValue);

  // Persist if configured
  if (this.#shouldPersist(key)) {
   this.#persist(key, value);
  }
 }

 get(key) {
  return this.#state.get(key);
 }

 subscribe(key, callback) {
  if (!this.#subscribers.has(key)) {
   this.#subscribers.set(key, new Set());
  }
  this.#subscribers.get(key).add(callback);

  // Return unsubscribe function
  return () => {
   this.#subscribers.get(key).delete(callback);
  };
 }

 #notify(key, newValue, oldValue) {
  const subscribers = this.#subscribers.get(key);
  if (subscribers) {
   subscribers.forEach((callback) => {
    callback(newValue, oldValue);
   });
  }
 }
}

Singleton Pattern

// Ensure single instance
let instance = null;

export function getStateManager() {
 if (!instance) {
  instance = new StateManager();
 }
 return instance;
}

// Export for convenience
export const stateManager = getStateManager();

Persistence Strategies

LocalStorage Strategy

class LocalStoragePersistence {
 constructor(prefix = "fitfileviewer_") {
  this.prefix = prefix;
 }

 save(key, value) {
  const storageKey = this.prefix + key;
  const serialized = JSON.stringify(value);
  localStorage.setItem(storageKey, serialized);
 }

 load(key) {
  const storageKey = this.prefix + key;
  const serialized = localStorage.getItem(storageKey);
  return serialized ? JSON.parse(serialized) : undefined;
 }

 remove(key) {
  const storageKey = this.prefix + key;
  localStorage.removeItem(storageKey);
 }
}

Electron Store Strategy

class ElectronStorePersistence {
 constructor(store) {
  this.store = store;
 }

 save(key, value) {
  this.store.set(key, value);
 }

 load(key) {
  return this.store.get(key);
 }

 remove(key) {
  this.store.delete(key);
 }
}

Domain Managers

ThemeManager

class ThemeManager {
 constructor(stateManager) {
  this.stateManager = stateManager;
  this.#initialize();
 }

 #initialize() {
  // Load system preference
  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
  const savedTheme = this.stateManager.get("theme");

  this.setTheme(savedTheme || (prefersDark ? "dark" : "light"));

  // Listen for system changes
  window
   .matchMedia("(prefers-color-scheme: dark)")
   .addEventListener("change", (e) => {
    if (!this.stateManager.get("theme")) {
     this.setTheme(e.matches ? "dark" : "light");
    }
   });
 }

 getTheme() {
  return this.stateManager.get("theme");
 }

 setTheme(theme) {
  this.stateManager.set("theme", theme);
  document.documentElement.dataset.theme = theme;
 }

 toggleTheme() {
  const current = this.getTheme();
  this.setTheme(current === "dark" ? "light" : "dark");
 }
}

Subscription Patterns

Component Integration

// In a UI component
class MapComponent {
 constructor() {
  this.unsubscribers = [];
 }

 mount() {
  // Subscribe to file changes
  const unsub = stateManager.subscribe("currentFile", (file) => {
   if (file) {
    this.renderRoute(file.data.gpsPoints);
   }
  });
  this.unsubscribers.push(unsub);

  // Subscribe to theme changes
  const themeUnsub = stateManager.subscribe("theme", (theme) => {
   this.updateMapTheme(theme);
  });
  this.unsubscribers.push(themeUnsub);
 }

 unmount() {
  // Clean up all subscriptions
  this.unsubscribers.forEach((unsub) => unsub());
  this.unsubscribers = [];
 }
}

Computed State

// Derive state from other state
class ComputedState {
 constructor(dependencies, compute) {
  this.dependencies = dependencies;
  this.compute = compute;
  this.value = null;

  this.#setup();
 }

 #setup() {
  // Subscribe to all dependencies
  this.dependencies.forEach((key) => {
   stateManager.subscribe(key, () => {
    this.#recompute();
   });
  });

  // Initial computation
  this.#recompute();
 }

 #recompute() {
  const values = this.dependencies.map((key) => stateManager.get(key));
  this.value = this.compute(...values);
 }

 get() {
  return this.value;
 }
}

// Usage
const formattedDistance = new ComputedState(
 ["currentFile", "preferences"],
 (file, prefs) => {
  if (!file) return null;
  return formatDistance(file.totalDistance, prefs.units);
 }
);

---

Related: State Management API