NgRx är ett Redux-inspirerat tillståndshanteringbibliotek för Angular. Det centraliserar programtillståndet i en enda oföränderlig store, med ett strikt, förutsägbart, enriktad dataflöde byggt på RxJS.
Component dispatches an ACTION →
REDUCER produces new state (pure function) →
STORE updates →
SELECTORS read state →
Component re-renders
(EFFECTS handle side effects like HTTP, dispatching new actions)
import { createAction, props } from "@ngrx/store";
export const loadUsers = createAction("[Users] Load");
export const loadUsersSuccess = createAction("[Users] Load Success", props<{ users: User[] }>());
import { createReducer, on } from "@ngrx/store";
export const usersReducer = createReducer(
initialState,
on(loadUsers, state => ({ ...state, loading: true })),
on(loadUsersSuccess, (state, { users }) => ({ ...state, users, loading: false })),
);
Reducers är rena — givet det aktuella tillståndet och en åtgärd returnerar de ett helt nytt tillståndsobjekt (oförändrat), muterar aldrig det gamla.
loadUsers$ = createEffect(() =>
this.actions$.pipe(
ofType(loadUsers),
switchMap(() =>
this.api.getUsers().pipe(
map(users => loadUsersSuccess({ users })) // dispatch success with the data
)
)
)
);
Effects lyssnar efter åtgärder, utför asynkront arbete (som HTTP), och skickar resultatåtgärder — håller bieffekter borta från komponenter och reducers.
export const selectUsers = createSelector(selectUsersState, s => s.users); // memoized
// component
users$ = this.store.select(selectUsers);
load() { this.store.dispatch(loadUsers()); }
<li *ngFor="let u of users$ | async">{{ u.name }}</li>
✓ Large apps with lots of shared state across many components
✓ Complex state interactions, need for time-travel debugging / strict predictability
✗ Small/medium apps → it's heavy boilerplate; a service + signals/BehaviorSubject is simpler
(Notering: NgRx erbjuder också en lättare SignalStore och ComponentStore för mindre boilerplate.)
NgRx för Redux förutsägbara, centraliserade, enriktade tillståndshantering till Angular — värdefullt för stora appar där många komponenter delar komplext tillstånd, och där strikt spårbarhet och debugging är viktigt.
Men det kommer med betydande boilerplate, så nyckeldomstolen är när man använder det (stort/komplext delat tillstånd) kontra enklare tillvägagångssätt (tjänster med signaler eller BehaviorSubject) för mindre appar.
Att förstå flödet action→reducer→store→selector och effects för bieffekter är centralt för att arbeta i NgRx-kodbaser.
Ett bibliotek med IT-intervjufrågor och detaljerade svar — från Junior till Senior.
Donera