การอภิปรายเกี่ยวกับการทำงานของแอปพลิเคชัน Redux

ในบทเรียนที่ผ่านมา เราได้นำองค์ประกอบทั้งหมดที่จำเป็นสำหรับการทำงานของแอปพลิเคชัน Redux ไปปฏิบัติ มาสรุปและทบทวนขั้นตอนหลักของการทำงานของแอปพลิเคชันเกี่ยวกับผลิตภัณฑ์ของเราอย่างรวดเร็วกัน

เมื่อเริ่มต้นครั้งแรก แอปพลิเคชันของเราจะดึงรายการผลิตภัณฑ์สองรายการจาก store โดยใช้ useSelector และแสดงบนหน้าจอ บนหน้าจอยังแสดงฟอร์มที่เราสามารถกรอกข้อมูล ของผลิตภัณฑ์ใหม่ได้ เมื่อผู้ใช้กดปุ่มบันทึก ตัวจัดการปุ่มจะส่ง action productAdded ซึ่งมีข้อมูลผลิตภัณฑ์ใหม่ที่ผู้ใช้กรอกในฟอร์ม ฟังก์ชัน reducer ที่เราเขียนสำหรับ slice ผลิตภัณฑ์จะได้รับ action นี้และเพิ่ม วัตถุของผลิตภัณฑ์ใหม่เข้าไปในอาร์เรย์ของผลิตภัณฑ์ Store แจ้งคอมโพเนนต์ว่าข้อมูล state ที่เก็บไว้มีการเปลี่ยนแปลง คอมโพเนนต์ ProductsList ของเราอ่านอาร์เรย์ที่เปลี่ยนแปลงมา เรียกการเรนเดอร์ ส่งผลให้ เราเห็นผลิตภัณฑ์ที่เพิ่มเข้ามาในรายการผลิตภัณฑ์

ทีนี้มาเปิด Redux DevTools ในเบราว์เซอร์และเพิ่ม ผลิตภัณฑ์อีกชิ้นในแอปพลิเคชัน จากนั้นดูที่แท็บ Log monitor ที่นี่เราสามารถเห็นได้ว่า state ของเราเป็นอย่างไรเมื่อเริ่มต้นแอปพลิเคชัน และ หลังจากกดปุ่มบันทึก action ปรากฏขึ้น เราสามารถเห็นคุณสมบัติ payload ของมันและการเปลี่ยนแปลงใน global state

ในบทถัดไป เราจะทำงานกับข้อมูลในแอปพลิเคชัน Redux ของเราอย่างลึกซึ้งยิ่งขึ้น