NgRx minangka perpustakaan manajemen status sing diilhami Redux kanggo Angular. Iku ngentralisir status aplikasi ing siji store sing immutable, kanthi aliran data sing ketat, bisa diprediksi, lan siji arah sing dibangun ing 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 })),
);
Reducer iku murni — diwenehi status saiki lan sawijining action, bali status obyek anyar (sacara immutably), ora jamak ngowahi sing lawas.
loadUsers$ = createEffect(() =>
this.actions$.pipe(
ofType(loadUsers),
switchMap(() =>
this.api.getUsers().pipe(
map(users => loadUsersSuccess({ users })) // dispatch success with the data
)
)
)
);
Effects mirsani actions, nindakake karya async (kaya HTTP), lan ngirim actions asil — njaga efek samping saka komponen lan 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
(Cathetan: NgRx uga nawakake SignalStore lan ComponentStore sing luwih entheng kanggo boilerplate sing luwih sithik.)
NgRx ngebawa manajemen status terpusat, bisa diprediksi, lan siji arah Redux menyang Angular — iku pantes banget kanggo aplikasi gedhé ngendi akeh komponen melu-melu status rumit, lan ngendi trace lan debugging ketat dadi penting.
Nanging iki ndadak boilerplate nggawe, mula keputusan utama yaiku kapan nggunakake (status bersama gedhé/rumit) banding cara-cara luwih ringkas (layanan karo signals utawa BehaviorSubject) kanggo aplikasi luwih cilik.
Krasa aliran action→reducer→store→selector lan effects kanggo efek samping minangka inti saka karya ing codebase NgRx.