Selectors และ Effects ใน NgRx

บทเรียนนี้ครอบคลุม selectors และ effects ซึ่งเป็นส่วนสำคัญของ NgRx สำหรับการจัดการสถานะใน Angular อย่างมีประสิทธิภาพ

Selectors คืออะไร

Selectors ช่วยให้คุณดึงข้อมูลบางส่วนของสถานะจาก Store ได้อย่างมีประสิทธิภาพ และช่วยเพิ่มประสิทธิภาพการเข้าถึงข้อมูล

การสร้าง Selectors

สร้าง selectors โดยใช้ฟังก์ชัน createSelector() เพื่อเลือกข้อมูลจากสถานะอย่างมีประสิทธิภาพ:

export const selectUser = createSelector(
  (state: AppState) => state.user,
  (user) => user.details
);

การใช้ Selectors ในคอมโพเนนต์

Selectors ช่วยให้คุณเข้าถึงข้อมูลใน Store ภายในคอมโพเนนต์ได้ง่าย:

this.store.select(selectUser).subscribe(user => console.log(user));

Effects คืออะไร

Effects จัดการผลข้างเคียงใน NgRx เช่น คำขอ HTTP โดยรับฟัง actions และดำเนินการแบบอะซิงโครนัส

การติดตั้ง Effects

ติดตั้ง NgRx Effects โดยใช้:

npm install @ngrx/effects --save

การสร้าง Effects

Effects จัดการผลข้างเคียง เช่น คำขอ HTTP ที่เกิดจาก actions:

loadUser$ = createEffect(() =>
  this.actions$.pipe(
    ofType(loadUser),
    mergeMap(() => this.userService.getUser().pipe(
      map(user => loadUserSuccess({ user }))
    ))
  )
);

การลงทะเบียน Effects

ลงทะเบียน effects ในโมดูลของคุณเพื่อเปิดใช้งานในแอปพลิเคชัน:

EffectsModule.forRoot([UserEffects])

สรุป

ตอนนี้คุณเข้าใจ selectors และ effects ใน NgRx แล้ว จึงสามารถจัดการสถานะและผลข้างเคียงได้อย่างมีประสิทธิภาพ ทำได้ยอดเยี่ยมครับ/ค่ะ!