Sign in
Skip to solution
hardFrontend

What is NgRx?

675 views
01

Understand the problem

Explain NgRx state management.

ngrxstate
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

NgRx is a Redux-style reactive state library for Angular: a single immutable store, actions describing events, reducers producing new state, selectors for derived reads, and effects for side effects. It suits large apps with complex shared state.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

Reducer + selector (sketch)
import { createReducer, on, createAction, props, createSelector } from '@ngrx/store';

export const add = createAction('[Cart] Add', props<{ item: string }>());

export const cartReducer = createReducer(
  [] as string[],
  on(add, (state, { item }) => [...state, item]),   // pure, returns NEW state
);

// Memoized selector to read a slice of the store:
export const selectCart = (s: { cart: string[] }) => s.cart;
export const selectCount = createSelector(selectCart, (cart) => cart.length);

// In a component: this.store.dispatch(add({ item: 'book' }));
//                 count$ = this.store.select(selectCount);
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 98 of 121 decoded in the Angular track. One more won't hurt.

Back to track