Angular State Management ด้วย NgRx: Store, Actions, Reducers

NgRx คืออะไร

NgRx เป็น state management library สำหรับ Angular ที่ได้รับแรงบันดาลใจจาก Redux ใช้ pattern Store → Action → Reducer → Selector

ติดตั้ง NgRx

npm install @ngrx/store @ngrx/effects @ngrx/entity

สร้าง Actions

// counter.actions.ts
import { createAction, props } from '@ngrx/store';

export const increment = createAction('[Counter] Increment');
export const decrement = createAction('[Counter] Decrement');
export const reset = createAction('[Counter] Reset');
export const loadUsers = createAction('[User] Load Users');
export const loadUsersSuccess = createAction(
  '[User] Load Users Success',
  props<{ users: User[] }>()
);
export const loadUsersFailure = createAction(
  '[User] Load Users Failure',
  props<{ error: string }>()
);

สร้าง Reducer

// counter.reducer.ts
import { createReducer, on } from '@ngrx/store';

export interface CounterState {
  count: number;
}

const initialState: CounterState = { count: 0 };

export const counterReducer = createReducer(
  initialState,
  on(increment, state => ({ ...state, count: state.count + 1 })),
  on(decrement, state => ({ ...state, count: state.count - 1 })),
  on(reset, state => ({ ...state, count: 0 }))
);

สร้าง Selector

// counter.selectors.ts
import { createSelector, createFeatureSelector } from '@ngrx/store';

export const selectCounterState = createFeatureSelector<CounterState>('counter');
export const selectCount = createSelector(
  selectCounterState,
  state => state.count
);

ใช้ใน Component

import { Store } from '@ngrx/store';

export class CounterComponent {
  count$ = this.store.select(selectCount);

  constructor(private store: Store) {}

  increment() { this.store.dispatch(increment()); }
  decrement() { this.store.dispatch(decrement()); }
  reset() { this.store.dispatch(reset()); }
}

สรุป

NgRx เหมาะกับ application ขนาดใหญ่ที่มี state ซับซ้อน ถ้า app เล็กอาจใช้ Service + Signal แทนได้ครับ