Redux หลักการทำงาน 4 ขั้นตอน
หลักการทำงานของ Redux:
1. Store : เก็บสถานะปัจจุบันของแอปพลิเคชันทั้งหมด เปรียบเสมือนแหล่งข้อมูลกลาง
2. Actions : เป็นวัตถุที่อธิบายการเปลี่ยนแปลงที่จะเกิดขึ้นกับ State
3. Reducers : เป็นฟังก์ชันที่รับ Action และ State ปัจจุบัน
• คำนวณ State ใหม่
• ส่ง State ใหม่ไปยัง Store
4. Components : ส่วนสำคัญใน Redux ที่ใช้ในการแสดง UI และเชื่อมต่อกับ Store
• เชื่อมต่อกับ Store
• รับ State
• แสดงผลลัพธ์
+--------+
| ผู้ใช้ | --> ส่งการกระทำ (เหตุการณ์)
| การกระทำ |
+--------+
|
v
+--------+ +--------------+
| คลังข้อมูล | <---- | ตัวลด |
| สถานะ | -----> | (ฟังก์ชันบริสุทธิ์)|
+--------+ +--------------+
|
v
+--------+ +--------------+
| อินเตอร์เฟซ | <---- | คอมโพเนนต์ | (คอมโพเนนต์ React)
| (เชื่อมต่อ Redux) | -----> | (เชื่อมต่อและเรนเดอร์)|
+--------+
4 ขั้นตอนที่กำหนดไว้อย่างชัดเจนสำหรับการจัดการสถานะ
1. Actions : เป็นวัตถุ ที่อธิบายเหตุการณ์ที่เกิดขึ้นในแอปพลิเคชัน มักมีสองคุณสมบัติ :
• ประเภท (Type) : สตริงที่ระบุประเภทของการดำเนินการอย่างเดียวกัน
• ข้อมูลส่วนเพิ่ม (Payload) ตัวเลือก : ข้อมูลเพิ่มเติมใด ๆ ที่เกี่ยวข้องกับการดำเนินการ เช่น ID ค่า หรือข้อความข้อผิดพลาด
2. Reducers : ฟังก์ชันที่จะรับสถานะ หรือ ID ปัจจุบันของแอปพลิเคชัน และ Object การดำเนินการคืนค่าสถานะใหม่ ขึ้นอยู่กับประเภทของการดำเนินการ และข้อมูลเพิ่มเติมของ Reducers :
• Pure หรือ (Side Effects) : ไม่ควรแก้ไขสถานะที่มีอยู่โดยตรง แต่ควรสร้าง Object สถานะใหม่
มีความเด่นกาณี: โดยให้มีข้อมูลข้อมูลเดียวกัน (สถานะและการดำเนินการ) พวกเขาควรส่งผลลัพธ์เดียวกันเสมอ
• Deterministic : โดยให้มีข้อมูลข้อมูลเดียวกัน (สถานะ และการดำเนินการ) ควรส่งผลลัพธ์เดียวกันเสมอ
Input เดียวกัน (สถานะ และ Action) | Output เดียวกัน (สถานะใหม่)
3. Store (คลังข้อมูล) : เป็นแหล่งข้อมูลเดียวสำหรับสถานะแอปพลิเคชัน เก็บสถานะปัจจุบัน และให้วิธีการ
• ส่งการกระทำ (Dispatch Actions) : ช่วยให้ Components เรียกใช้การเปลี่ยนแปลงสถานะ โดยการส่ง Actions
• รับสถานะ (Get State) : ทำให้ Components สามารถเข้าถึงสถานะปัจจุบันของแอปพลิเคชันได้
• สมัครสมาชิกในการเปลี่ยนแปลง (Subscribe to Changes) : Components สามารถฟังการอัปเดตสถานะ และทำการ (Render) เรนเดอร์ใหม่ เมื่อสถานะเปลี่ยนแปลง
4. คอมโพเนนต์ (Components) : เป็นบล็อกสร้าง UI ที่สามารถส่งการกระทำ และเชื่อมต่อกับคลังข้อมูล
• ส่งการกระทำ (Dispatch Actions) : Components สามารถเรียกใช้การเปลี่ยนแปลงสถานะ โดยการส่ง Actions ไปยังคลังข้อมูล
• เชื่อมต่อกับคลังข้อมูล (Connect to Store) : Components สามารถเชื่อมต่อกับคลังข้อมูล Redux เพื่อเข้าถึงสถานะปัจจุบัน และสมัครสมาชิกเมื่อสถานะเปลี่ยนแปลง โดยเมื่อสถานะเปลี่ยนแปลง Components ที่เชื่อมต่อก็จะทำการ Render ใหม่โดยอัตโนมัติ พร้อมกับข้อมูลที่อัปเดต
อัพเดตข้อมูล : 16 มี.ค. 2567 11:02 : 584