All Challenges
2 PointsBasicMERN Stack
00:00
MERN Stack: Lightweight Reactive State Store with Selectors & Middleware
Build a mini-Zustand/Redux state store with immutable patchState, selector memoization, and logger/persistence middleware.
### Problem Overview
State management is at the core of every React MERN stack interview. You must build a lightweight, dependency-free reactive store (similar to Zustand or Redux core) supporting state reading, immutable partial updates, subscriber notifications, selector functions with equality checks, and unsubscription.
### Functional Requirements
1. **`createStore<T>(initialState: T): Store<T>`**:
- Initializes the store with initial state.
2. **`getState(): T`**:
- Returns current state snapshot.
3. **`setState(updater: Partial<T> | ((prev: T) => Partial<T>)): void`**:
- Merges changes immutably with existing state.
4. **`subscribe(listener: (state: T, prevState: T) => void): () => void`**:
- Registers a subscriber callback that fires whenever state updates.
5. **`select<R>(selector: (state: T) => R, listener: (selected: R, prevSelected: R) => void): () => void`**:
- Triggers the listener only when the specific selected slice changes.
AI Review Rubric Dimensions (1–10 Points):
- Immutable state merging
- Selector memoization
- Listener isolation
- Unsubscribe memory safety
solution.tsTYPESCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
19 lines•615 characters•
AI Review Ready