NgRx State Store Limits for Regional Time Zone Normalization

Direct answer

Normalize to UTC inside the reducer, before the value enters the store. Keep the store as a single serializable source of truth - UTC epoch milliseconds or ISO 8601 strings - and perform locale-specific display conversion in scoped selectors or components. Effects should not own normalization alone, because an asynchronous action can leave the store briefly holding mixed local and UTC formats.

Confirmed facts versus likely explanation

Confirmed: JavaScript Date objects are mutable. Storing them directly in NgRx state weakens immutability guarantees, makes reducer changes harder to detect, and risks losing or altering time-zone offset data during serialization.

Confirmed: Memoized selectors recompute only when their input references change. If a volatile locale value is part of the selector input, every locale switch can invalidate the cache and force the selector to re-run across the branches it reads.

Likely explanation: In a large state tree, a broadly scoped selector that depends on locale can cause extra re-evaluation when the locale changes, even if only a small slice uses the converted date. The cost is driven more by selector breadth and tree depth than by total store size alone.

Steps for this case

1. In the reducer, convert incoming Date objects or local strings to UTC epoch milliseconds (date.getTime()) or ISO strings before assigning them to state. Clone the input Date before reading fields; never mutate it.
2. Store only one representation per event. Do not keep both a local Date and a UTC string for the same record.
3. Create a tightly scoped selector that takes the UTC value and the current locale, then returns a formatted display string. Pass locale as a separate argument so the cache invalidates only for the affected UI branch.
4. Format dates in the component or template using the selector output, not inside the reducer.
5. Add a reducer unit test asserting every persisted date value is a number or ISO string and that no input Date object is mutated.

Verification

• Open NgRx DevTools, toggle the application locale, and confirm the stored state shape stays uniform while only affected selector outputs update.
• Instrument selector invocation counts for a large state slice under repeated locale changes to detect memoization misses.
• Check package.json for the installed NgRx major version; classic Store and signal-based Store have different selector memoization and update semantics.

Missing diagnostic detail

Are you using the classic NgRx Store or the signal-based store? The recommendation changes because selector memoization and update behavior differ between the two.

Assumption: this answer assumes the classic NgRx Store unless you confirm otherwise. Selector performance figures are not measured; treat the large-tree claim as a likely explanation to verify with your own instrumentation.