การทำงานของแอปพลิเคชัน Redux

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

การทำงานของแอปพลิเคชันเกิดขึ้นตามแนวคิด การไหลของข้อมูลแบบทางเดียว (one-way data flow) ดังที่เราได้กล่าวไปแล้วก่อนหน้านี้

ในขั้นตอนการเริ่มต้น (เมื่อเริ่มต้นแอปพลิเคชันครั้งแรก) store (ที่เก็บข้อมูล) จะถูกสร้างขึ้นโดยใช้ root reducer store จะเรียกใช้ reducer นี้เพียงครั้งเดียวและบันทึก ค่าที่ส่งกลับมาเป็นสถานะเริ่มต้น ในการแสดงผลเบื้องต้น (initial rendering) คอมโพเนนต์ ของแอปพลิเคชันจะใช้ state (สถานะ) ปัจจุบันซึ่งบันทึกไว้ ใน store นอกจากนี้พวกเขายังสมัครสมาชิก (subscribe) เพื่อรับการอัปเดตจาก store เพื่อที่จะรับรู้การเปลี่ยนแปลง ของ state ทันที

ในการทำงานต่อไปของแอปพลิเคชัน จะเกิดสิ่งต่อไปนี้ สมมติว่าผู้ใช้คลิกเมาส์ที่ปุ่ม ในกรณีนี้ action (แอ็กชัน) จะถูกสร้างขึ้นด้วยโค้ด และส่งไปยัง store store จะเรียกใช้ reducer อีกครั้ง พร้อมกับ state ที่เก็บไว้และ action ที่ได้รับ ผลลัพธ์คือค่าของ state ที่เปลี่ยนแปลงแล้วจะถูกบันทึก เป็นค่าใหม่ store ยังแจ้งคอมโพเนนต์ที่สมัครสมาชิกเพื่อรับการเปลี่ยนแปลง ว่ามีการเปลี่ยนแปลงเกิดขึ้น ในทางกลับกัน คอมโพเนนต์จะตรวจสอบว่าส่วนของ state ที่จำเป็นสำหรับพวกเขาเปลี่ยนแปลงไปหรือไม่ สุดท้าย หากมีการเปลี่ยนแปลง คอมโพเนนต์จะเรียกการแสดงผล (render) เพื่อแสดงข้อมูลใหม่