NgRx adalah perpustakaan manajemen state yang terinspirasi Redux untuk Angular. Ini memusatkan state aplikasi dalam satu store yang tidak dapat diubah, dengan alur data yang ketat, dapat diprediksi, dan searah yang dibangun di atas 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 adalah murni — diberikan state saat ini dan action, mereka mengembalikan objek state yang sama sekali baru (secara immutable), tidak pernah mengubah yang lama.
loadUsers$ = createEffect(() =>
this.actions$.pipe(
ofType(loadUsers),
switchMap(() =>
this.api.getUsers().pipe(
map(users => loadUsersSuccess({ users })) // dispatch success with the data
)
)
)
);
Effects mendengarkan actions, melakukan pekerjaan asinkron (seperti HTTP), dan mengirimkan action hasil — menjaga efek samping di luar komponen dan reducer.
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
(Catatan: NgRx juga menawarkan SignalStore dan ComponentStore yang lebih ringan untuk boilerplate lebih sedikit.)
NgRx membawa manajemen state yang dapat diprediksi, terpusat, dan searah milik Redux ke Angular — berharga untuk aplikasi besar di mana banyak komponen berbagi state kompleks, dan di mana pelacakan ketat dan debugging penting.
Tapi itu disertai dengan boilerplate yang signifikan, jadi penilaian kunci adalah kapan menggunakannya (state besar/kompleks yang dibagikan) versus pendekatan yang lebih sederhana (services dengan signals atau BehaviorSubject) untuk aplikasi yang lebih kecil.
Memahami alur action→reducer→store→selector dan effects untuk efek samping adalah inti dari bekerja di codebase NgRx.