NgRx ialah perpustakaan pengurusan-negeri yang terinspirasi Redux untuk Angular. Ia memusatkan keadaan aplikasi dalam satu store yang tidak boleh diubah, dengan aliran data yang ketat, dapat diramalkan, 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 })),
);
Reducer ialah tulen — diberikan keadaan semasa dan tindakan, mereka mengembalikan objek keadaan yang benar-benar baru (secara tidak berubah), 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 tindakan, melakukan kerja tak segerak (seperti HTTP), dan menghantar tindakan keputusan — menjaga kesan sampingan di luar komponen dan penurun.
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
(Nota: NgRx juga menawarkan SignalStore dan ComponentStore yang lebih ringan untuk boilerplate yang lebih sedikit.)
NgRx membawa pengurusan keadaan yang dapat diramalkan, berpusat, dan searah Redux ke Angular — berharga untuk aplikasi besar di mana banyak komponen berkongsi keadaan yang rumit, dan di mana kebolehsusuran yang ketat dan penyahpepijatan penting.
Tetapi ia membawa boilerplate yang ketara, jadi pertimbangan utama ialah bila menggunakannya (keadaan kongsi besar/rumit) berbanding pendekatan yang lebih mudah (perkhidmatan dengan isyarat atau BehaviorSubject) untuk aplikasi yang lebih kecil.
Memahami aliran action→reducer→store→selector dan kesan sampingan untuk effects adalah penting untuk bekerja dalam asas kod NgRx.