NgRx คือไลบรารีการจัดการสถานะที่ได้แรงบัญชาจาก Redux สำหรับ Angular ซึ่งรวมศูนย์สถานะของแอปพลิเคชันไว้ใน store เดียวที่ไม่เปลี่ยนแปลง โดยมีการไหลของข้อมูลแบบไม่เปลี่ยนแปลง คาดเดาได้ และเป็นทิศทางเดียว ซึ่งสร้างมาจาก 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 เป็น บริสุทธิ์ — ให้สถานะปัจจุบันและการกระทำแล้ว พวกมันจะส่งคืนวัตถุสถานะใหม่อย่างแท้จริง (โดยไม่เปลี่ยนแปลง) โดยไม่ต้องเปลี่ยนแปลงสถานะเก่า
loadUsers$ = createEffect(() =>
this.actions$.pipe(
ofType(loadUsers),
switchMap(() =>
this.api.getUsers().pipe(
map(users => loadUsersSuccess({ users })) // dispatch success with the data
)
)
)
);
Effects ฟังการกระทำ ทำงานแบบอะซิงโครนัส (เช่น HTTP) และส่งการกระทำผลลัพธ์ — ทำให้ผลข้างเคียงอยู่นอกส่วนประกอบและตัวลดต่าง
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
(หมายเหตุ: NgRx ยังมี SignalStore และ ComponentStore ที่เบากว่า สำหรับ boilerplate ที่น้อยกว่า)
NgRx นำการจัดการสถานะแบบคาดเดาได้ แบบรวมศูนย์ แบบทิศทางเดียวของ Redux ไปยัง Angular — มีค่าสำหรับแอปขนาดใหญ่ที่องค์ประกอบมากมายแบ่งปันสถานะที่ซับซ้อน และโดยที่การติดตามผล การแก้จุดบกพร่องมีความสำคัญ
แต่มันนำ boilerplate ที่มีนัยสำคัญมาด้วย ดังนั้นการตัดสินใจหลักคือ เมื่อใด ควรใช้มัน (สถานะที่ใหญ่/ซับซ้อนที่แบ่งปัน) เมื่อเทียบกับวิธีการที่ง่ายกว่า (บริการที่มีสัญญาณหรือ BehaviorSubject) สำหรับแอปที่เล็กกว่า
การทำความเข้าใจการไหล action→reducer→store→selector และผลกระทบจากผลข้างเคียงเป็นสิ่งสำคัญในการทำงานใน NgRx codebase