ในแอปพลิเคชันที่ขับเคลื่อน ด้วย Redux สถาปัตยกรรมจะหมุนรอบแนวคิดหลักสามประการ: Redux store, actions และ reducers มาเจาะลึกแต่ละแนวคิดเหล่านี้และดูว่าพวกเขาทำงานร่วมกันอย่างไร
Redux Store
Redux store เป็นแหล่งความจริงแหล่งเดียวที่เก็บสถานะที่สมบูรณ์ของใบสมัครของคุณ โดยพื้นฐานแล้วมันคือออบเจ็กต์ JavaScript ที่มีข้อมูลที่แสดงถึงสถานะแอปพลิเคชันทั้งหมด คุณสร้าง store โดยใช้ createStore
ฟังก์ชันจากไลบรารี Redux
Actions
Actions เป็นวัตถุ JavaScript ธรรมดาที่อธิบายสิ่งที่เกิดขึ้นในแอปพลิเคชัน มี type
ช่องที่ระบุประเภทของการกระทำที่กำลังดำเนินการ และสามารถรวมข้อมูลเพิ่มเติมได้เช่นกัน Actions ถูกสร้างขึ้นโดยใช้ผู้สร้างการกระทำซึ่งเป็นฟังก์ชันที่ส่งคืนออบเจ็กต์การกระทำ ตัวอย่างเช่น:
Reducers
Reducers ระบุว่าสถานะของแอปพลิเคชันเปลี่ยนแปลงไปอย่างไรเพื่อตอบสนอง actions ต่อ ตัวลดคือฟังก์ชันล้วนๆ ที่รับสถานะปัจจุบันและการดำเนินการเป็นอาร์กิวเมนต์และส่งกลับสถานะใหม่ Reducers จะรวมกันเป็นตัวลดรูทตัวเดียวโดยใช้ combineReducers
ฟังก์ชัน นี่เป็นตัวอย่างง่ายๆ:
ทำงานร่วมกัน
เมื่อคุณส่งการดำเนินการโดยใช้ dispatch
ฟังก์ชัน Redux จะส่งต่อการดำเนินการไปยังไฟล์ reducers. ตัวลดแต่ละตัวจะตรวจสอบว่าประเภทของการดำเนินการตรงกับของตัวเองหรือไม่ และอัปเดตส่วนที่เกี่ยวข้องของสถานะตามนั้น สถานะที่อัปเดตจะถูกจัดเก็บไว้ใน Redux store และส่วนประกอบที่เชื่อมต่อใดๆ จะแสดงผลอีกครั้งตามสถานะใหม่
สถานการณ์ตัวอย่าง
ลองนึกภาพแอปพลิเคชันรายการสิ่งที่ต้องทำ เมื่อผู้ใช้เพิ่มสิ่งที่ต้องทำใหม่ การดำเนินการจะถูกส่งไปพร้อมกับประเภท ADD_TODO
และข้อความของสิ่งที่ต้องทำเป็นเพย์โหลด ตัวลดสิ่งที่ต้องทำได้รับการดำเนินการนี้ เพิ่มสิ่งที่ต้องทำใหม่ให้กับสถานะ และส่งคืนสถานะที่อัปเดต
บทสรุป
การทำความเข้าใจว่า Redux store, actions และ reducers โต้ตอบอย่างไรเป็นสิ่งสำคัญสำหรับการจัดการสถานะที่มีประสิทธิภาพ สถาปัตยกรรมนี้ช่วยให้มั่นใจได้ถึงการแยกข้อกังวลอย่างชัดเจน และทำให้ง่ายต่อการจัดการสถานะแอปพลิเคชันที่ซับซ้อน เมื่อคุณพัฒนาต่อไปด้วย Redux แนวคิดเหล่านี้จะสร้างรากฐานของกลยุทธ์การจัดการรัฐของคุณ