Quản lý state với NgRx hoạt động như thế nào?

Question

Accepted Answer

**NgRx** là một thư viện quản lý state lấy cảm hứng từ Redux cho Angular. Nó tập trung hóa state của ứng dụng trong một **store** bất biến duy nhất, với một luồng dữ liệu một chiều nghiêm ngặt, dễ đoán, xây dựng trên RxJS. ## Các mảnh cốt lõi và luồng ```text Component dispatch một ACTION → REDUCER tạo ra state mới (hàm thuần) → STORE cập nhật → SELECTOR đọc state → Component render lại (EFFECT xử lý các side effect như HTTP, dispatch các action mới) ``` ## Action — mô tả điều gì đã xảy ra ```ts import { createAction, props } from "@ngrx/store"; export const loadUsers = createAction("[Users] Load"); export const loadUsersSuccess = createAction("[Users] Load Success", props<{ users: User[] }>()); ``` ## Reducer — hàm thuần tính toán state tiếp theo ```ts 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 là **thuần (pure)** — cho state hiện tại và một action, chúng trả về một đối tượng state hoàn toàn mới (theo lối bất biến), không bao giờ mutate cái cũ. ## Effect — xử lý các side effect (HTTP, v.v.) ```ts loadUsers$ = createEffect(() => this.actions$.pipe( ofType(loadUsers), switchMap(() => this.api.getUsers().pipe( map(users => loadUsersSuccess({ users })) // dispatch success kèm dữ liệu ) ) ) ); ``` Effect lắng nghe các action, thực hiện công việc async (như HTTP), và dispatch các action kết quả — giữ side effect ra khỏi component và reducer. ## Selector + sử dụng trong component ```ts export const selectUsers = createSelector(selectUsersState, s => s.users); // được memoize // component users$ = this.store.select(selectUsers); load() { this.store.dispatch(loadUsers()); } ``` ```html

``` ## Khi nào NgRx đáng dùng? ```text ✓ Ứng dụng lớn với nhiều state dùng chung trên nhiều component ✓ Tương tác state phức tạp, cần time-travel debugging / tính dễ đoán nghiêm ngặt ✗ Ứng dụng nhỏ/vừa → boilerplate nặng; một service + signal/BehaviorSubject đơn giản hơn ``` (Lưu ý: NgRx cũng cung cấp **SignalStore** và **ComponentStore** nhẹ hơn để giảm boilerplate.) ## Tại sao điều này quan trọng NgRx mang quản lý state dễ đoán, tập trung, một chiều của Redux vào Angular — có giá trị cho các ứng dụng lớn nơi nhiều component chia sẻ state phức tạp, và nơi tính truy vết nghiêm ngặt cùng debugging quan trọng. Nhưng nó kéo theo nhiều boilerplate, nên phán đoán then chốt là *khi nào* dùng nó (state phức tạp/dùng chung lớn) so với các cách tiếp cận đơn giản hơn (service với signal hoặc `BehaviorSubject`) cho các ứng dụng nhỏ. Hiểu luồng action→reducer→store→selector và effect cho side effect là cốt lõi khi làm việc trong các codebase NgRx.