NgRx

EntityState splits a collection into ids, which hold the order, and entities, a map keyed by id, so a card is found by key instead of a scan, is stored once, and can change without rebuilding the order.

An NgRx reducer is a pure function whose new object is how the store detects a change: selectors and select() compare by reference. In development the default immutability check freezes state, so a mutation throws instead of failing silently.

Selectors keep knowledge of the state shape in one file, compute derived values such as invoice totals once and cache them, compose into larger reads, and are pure functions that can be tested without a component.

An NgRx SignalStore is an injectable class built by signalStore() from features: withState turns state slices into signals, withComputed and withMethods add derived values and operations, and by default only the store's own methods can change state.

An NgRx action is a plain object whose type string names an event, such as '[Catalogue Page] Opened'. You declare an action creator with createAction and props, call it to build the object, and pass that object to Store.dispatch.

An NgRx reducer is a pure function, so call it directly with a start state and an action from its creator, then assert the new values, a new object for handled actions and the same reference for unknown ones.

createFeature({ name: 'orders', reducer }) bundles the reducer with a feature selector and one selector per state property. Putting provideState(ordersFeature) in the admin route's providers adds the slice to the single store when that route first activates.

createFeatureSelector reads the invoices key; createSelector chains inputs into a projector. Each memoized selector caches only its last arguments and result, compared with ===, and keeps them until the next miss or release().

Define search = rxMethod<string>(pipe(debounceTime, distinctUntilChanged, switchMap to the API)) and call it once with the query signal. tapResponse on the inner request handles errors so they never reach the method's single subscription and kill it.

Write a withPaging() function that returns signalStoreFeature(withState(...), withComputed(...)) for the page index, loading flag and error, then add it to both signalStore() calls. Each store gets its own independent copy of that state.

signalStore() applies its features left to right, and each feature's factory receives only the members added before it. withState adds state signals, withComputed derives read-only signals, and withMethods adds operations that call patchState, so a feature cannot use a member declared later.

createActionGroup returns one action creator per event, named by camel-casing the event name, with type '[Source] Event Name'. A payload-less event needs emptyProps() because the events map needs a value and props<{}>() fails NgRx's empty-object type check.

Provide provideMockStore from @ngrx/store/testing, pin the cart-total selector with overrideSelector or the selectors option, and assert the rendered total; since no reducers run, verify clicks by spying on store.dispatch.

Search uses switchMap so a newer query cancels the stale request; save uses concatMap so every booking completes in order; login uses exhaustMap so repeat clicks are ignored. switchMap on save cancels an in-flight save, whose outcome action then never arrives.

An NgRx effect dispatches every value it emits unless created with { dispatch: false }. An effect that only navigates or logs through tap re-emits the action it received, so without that flag it dispatches the same action again and loops.

Export a const built with createEffect((actions$ = inject(Actions), api = inject(BookingApi)) => ..., { functional: true }), filter with ofType, map the API result to success or failure actions, and register it with provideEffects at root or in a route's providers.

selectId tells the adapter which value is a card's key and defaults to entity.id; sortComparer, when given, keeps ids sorted on every write, while the default false keeps insertion order and does less work.

updateOne takes { id, changes }, shallow-merges the changes into the stored card and returns state with a new entities map, keeping ids unless the key or sort slot changed. An unknown id returns the same state object.

store.select returns an Observable built from map plus distinctUntilChanged, so repeats are dropped by ===. store.selectSignal returns a computed signal over the store's state, compared with Object.is or a supplied equal function.

For an existing id, addEntity keeps the stored product, setEntity replaces it and upsertEntity merges the given properties. withEntities takes no id selector; pass selectId to each add, set, upsert and update call, or bundle it with entityConfig.

A SignalStore's onInit runs once per instance, in its constructor on first injection, inside the injection context. onDestroy runs when the creating injector is destroyed: with the component for a component-provided store, at application teardown for a root store.

provideStore() and StoreModule.forRoot() configure the same root store with the same arguments. provideStore() returns EnvironmentProviders for a standalone app's application config; forRoot() goes in an NgModule's imports. Register the root once; a second registration throws.

Call selector.projector(...) with plain input values to test the projection logic alone; it never runs the input selectors, so a whole-state call is still needed to prove the selector reads the right slices.

An outer catchError replaces the whole effect stream with its fallback, which emits loginFailed and completes, so the effect is finished. NgRx's default handler only resubscribes after uncaught errors, up to 10 times; catch on the inner request instead.

Provide a ComponentStore subclass in the picker's providers so each picker gets its own store that is torn down with it; updater writes state, select exposes deduplicated Observables, and effect runs async work such as loading blocked days.

A meta-reducer wraps the root reducer: on the logout action it calls the inner reducer with undefined state, so every slice falls back to its initial state. Registered in provideStore's metaReducers, it also covers features added later by lazy routes.

NgRx 22 enables strictStateImmutability and strictActionImmutability by default in development; the two serializability checks, strictActionWithinNgZone and strictActionTypeUniqueness start off. Production builds switch all six off, whatever the config says.

createSelector caches one set of arguments compared by ===. It misses when an input selector builds a new array or object each call, when one instance is shared across different parameters, or when a factory creates a fresh selector per read.

Props selectors share one single-entry cache across every caller's props, type poorly and memoize child selectors badly. Replace them with a factory, (customerId) => createSelector(...), one instance per reader. Deprecated since NgRx 12, slated for removal in v23.