Migrate state management from MobX to Zustand with Immer#4
Merged
stefanwille merged 4 commits intomasterfrom Jan 25, 2026
Merged
Migrate state management from MobX to Zustand with Immer#4stefanwille merged 4 commits intomasterfrom
stefanwille merged 4 commits intomasterfrom
Conversation
Replace MobX observable classes and XState state machines with a centralized Zustand store using Immer middleware for immutable updates. Key changes: - Create new src/model/store/ directory with Zustand store structure - gameStore.ts: main store with state and actions - types.ts: TypeScript interfaces for all state - initialState.ts: factory functions for initial state - ghostHelpers.ts: computed property helpers for ghosts - constants.ts: game timing constants - Implement state machine transitions directly in Zustand actions - sendPacManEvent: eating → chasing → dead - sendGhostEvent: scatter ↔ chase ↔ frightened → dead - Update all game logic to use useGameStore.getState() pattern - Remove observer HOC from all React components - Convert components to use useGameStore hooks with selectors - Update test files to use new store reset pattern - Convert WayFindingPage from MobX local store to React useState The main application now exclusively uses Zustand. Legacy MobX classes are retained for isolated unit tests of the original class behavior.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Updated all relevant test files and model components to import from LegacyStore instead of the removed Store class. This change ensures compatibility with the new Zustand state management system while retaining legacy functionality for unit tests.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR replaces the MobX-based state management system with Zustand and Immer middleware, simplifying the codebase while maintaining all existing functionality. The new store uses a single source of truth with explicit state mutations through Immer's draft-based API.
Key Changes
State Management: Migrated from MobX
StoreandGameclasses to a Zustand store (useGameStore) with Immer middleware for immutable updatesStore Structure: Created new
src/model/store/directory with:gameStore.ts- Main Zustand store with state and actionstypes.ts- TypeScript type definitions for all state shapesinitialState.ts- Factory functions for creating initial stateghostHelpers.ts- Helper functions for ghost computed valuesconstants.ts- Game constants (timers, speeds, scoring)State Machines: Implemented PacMan and Ghost state transitions directly in the store using pure functions (
pacManTransition,ghostTransition) instead of XStatesendPacManEvent()andsendGhostEvent()handle state transitionsComponent Integration:
StoreContextprovider pattern; store is now globally accessibleStoreContext.tsto provide compatibility hooks (useStore,useGame,useDebugState) that delegate to Zustand selectorsApp.tsxby removing provider wrapperGame Loop: Updated
onAnimationFrame.tsto work with Zustand state mutations instead of MobX actionsTests: Updated
detectCollisions.test.tsto use Zustand store directly withuseGameStore.setState()anduseGameStore.getState()Dependencies: Added
zustand@^5.0.10andimmer@^11.1.3; kept MobX/XState for backward compatibility with legacy test filesImplementation Details
selectPacManDead,selectEnergizerTimeLeft)StoreContext.tsMigration Notes
Some test files still import from legacy MobX-based classes (Store.ts, Game.ts, PacMan.ts, Ghost.ts) for isolated unit testing. The main application uses Zustand exclusively.