พื้นฐานสำคัญของ NgRx Store

บทเรียนนี้จะแนะนำให้คุณรู้จัก NgRx ซึ่งเป็นโซลูชันทรงพลังสำหรับการจัดการสถานะของแอปพลิเคชัน Angular

NgRx คืออะไร

NgRx ได้รับแรงบันดาลใจจาก Redux และช่วยจัดการสถานะไว้ที่ศูนย์กลางในแอปพลิเคชัน Angular ทำให้การจัดการข้อมูลระหว่างคอมโพเนนต์ต่าง ๆ ง่ายขึ้น

เหตุใดจึงควรใช้ NgRx

• การจัดการสถานะแบบรวมศูนย์
• การไหลของข้อมูลที่ชัดเจนและคาดเดาได้
• การแก้ไขข้อบกพร่องและการทดสอบที่ง่ายขึ้น

แนวคิดหลัก

NgRx ประกอบด้วยแนวคิดสำคัญดังนี้:

• Store: จัดเก็บสถานะของแอปพลิเคชัน
• Actions: อธิบายเหตุการณ์ต่าง ๆ
• Reducers: จัดการการเปลี่ยนแปลงสถานะ
• Selectors: ดึงข้อมูลสถานะ

การติดตั้ง NgRx Store

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

npm install @ngrx/store --save

การสร้าง Store

กำหนด Store ในโมดูลแอปพลิเคชันของคุณ:

StoreModule.forRoot({ appState: appReducer })

การสร้าง Actions

Actions ใช้อธิบายเหตุการณ์ต่าง ๆ ในแอปพลิเคชันของคุณ:

export const loadData = createAction('[App] Load Data');

Reducers

Reducers จัดการการเปลี่ยนแปลงสถานะโดยตอบสนองต่อ actions และสร้างสถานะใหม่:

export const appReducer = createReducer(
  initialState,
  on(loadData, state => ({ ...state, loading: true }))
);

สรุป

คุณเรียนรู้พื้นฐานสำคัญของการใช้ NgRx Store เพื่อจัดการสถานะแอปได้อย่างมีประสิทธิภาพแล้ว ทำได้ดีมากครับ/ค่ะ!