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