隨記

Week 08 · Day 05 — NgRx 基礎：安裝與 Actions

學習目標

  • 了解 NgRx（Redux 模式）的定位
  • 安裝 NgRx store 與 effects
  • 用 createAction 定義 actions

重點

NgRx 是什麼 - Angular 官方不可或缺的狀態管理套件，實作 Redux 模式 - 單一不可變狀態、單向資料流 - 三大核心：Actions、Reducer、Store（+ Effects 處理副作用）

安裝 

npm install @ngrx/store @ngrx/effects

Actions（動作） - 描述「發生什麼事」 - 用 createAction 建立，可帶 props 資料 

import { createAction, props } from '@ngrx/store';

export const addTodo = createAction(
  '[Todo] Add Todo',                  // 型別名稱（唯一）
  props<{ todo: Todo }>()             // 攜帶資料
);

export const removeTodo = createAction(
  '[Todo] Remove Todo',
  props<{ id: string }>()
);

export const loadTodos = createAction('[Todo] Load Todos');
- 型別字串通常格式 [來源] 動作 - props<T>() 定義 action 可帶的 payload

資料流 

dispatch(action) → reducer → 新 state → selectors → UI

實作

  1. 安裝 @ngrx/store @ngrx/effects
  2. 建立 todo.actions.ts：addTodo / removeTodo / loadTodos
  3. 檢查型別字串是否唯一、有意義

作業

  • 安裝 NgRx store 與 effects
  • 用 createAction + props 定義至少 2 個 action
  • 解釋 action 的 type 字串格式 [來源] 動作