Actions และ Reducers

เรียนรู้การจัดการสถานะในแอปพลิเคชัน NgRx โดยใช้ actions และ reducers

Actions คืออะไร

Actions ใช้อธิบายเหตุการณ์หรือการดำเนินการเฉพาะในแอปพลิเคชัน เช่น การโหลดข้อมูลหรือการโต้ตอบของผู้ใช้

การสร้าง Actions

สร้าง actions โดยใช้ createAction():

export const login = createAction('[Login Page] Login');

ข้อมูลที่ส่งไปกับ Action

ส่งข้อมูลไปพร้อมกับ actions โดยใช้ payload:

export const loadUser = createAction('[User] Load', props<{ userId: number }>());

Reducers

Reducers จัดการการเปลี่ยนผ่านของสถานะตาม actions โดยส่งคืนสถานะใหม่และไม่แก้ไขสถานะเดิมโดยตรง

การสร้าง Reducers

ใช้ createReducer เพื่อกำหนดวิธีเปลี่ยนแปลงสถานะ:

export const userReducer = createReducer(
  initialState,
  on(loadUser, (state, action) => ({ ...state, user: action.userId }))

การอัปเดตสถานะ

Reducers ต้องส่งคืนออบเจ็กต์สถานะใหม่เสมอ ห้ามแก้ไขสถานะเดิมโดยตรง

on(loadUser, (state, action) => ({ ...state, user: action.userId }))

การรวม Reducers

รวม reducers หลายตัวเป็น root reducer เดียวเพื่อจัดการสถานะที่ซับซ้อน:

StoreModule.forRoot({ users: userReducer, posts: postReducer })

สรุป

คุณเรียนรู้การสร้าง actions และ reducers เพื่อจัดการสถานะใน Angular ด้วย NgRx ได้อย่างมีประสิทธิภาพแล้ว!