Redux ทำงานอย่างไรในแบบที่เข้าใจง่าย
การส่งข้อมูลระหว่าง React components มักจะให้ความรู้สึกเหมือนการเล่นเกมกระซิบส่งต่อกัน คุณต้องส่งข้อมูลจาก parent ไปยัง child และต่อไปยัง grandchild ซึ่งจะเริ่มวุ่นวายเมื่อแอปของคุณมีขนาดใหญ่ขึ้น
Redux เข้ามาแก้ปัญหานี้ โดยการสร้าง "single source of truth" (แหล่งข้อมูลความจริงหนึ่งเดียว) แทนที่จะมีข้อมูลกระจัดกระจาย ทุกอย่างจะถูกเก็บไว้ในคลังข้อมูลกลางเพียงแห่งเดียว
ลองนึกภาพร้านกาแฟเพื่อทำความเข้าใจ Redux
The Store (คลังข้อมูล) นี่คือสมุดบัญชีของร้าน ทำหน้าที่บันทึกจำนวนเมล็ดกาแฟ, รายการสั่งซื้อ และรายชื่อพนักงาน
The Action (รายการสั่งซื้อ)
ลูกค้าจะไม่เดินไปหยิบลาเต้จากเคาน์เตอร์เอง แต่พวกเขาจะทำการสั่งซื้อ Action คือ object ง่ายๆ ที่อธิบายว่าเกิดอะไรขึ้นบ้าง
ตัวอย่าง: { type: 'ADD_TODO', text: 'Buy Milk' }
The Reducer (บาริสต้า) บาริสต้าเป็นเพียงคนเดียวที่มีสิทธิ์อัปเดตสมุดบัญชี พวกเขาจะนำ state ปัจจุบันและรายการสั่งซื้อใหม่มาประมวลผล จากนั้นจึงสร้างสมุดบัญชีฉบับใหม่ขึ้นมา
The Dispatch (พนักงานแคชเชียร์) แคชเชียร์จะรับออเดอร์ของคุณแล้วส่งต่อให้บาริสต้า Dispatch คือฟังก์ชันที่ทำหน้าที่ส่ง action ของคุณไปยัง store
ทำไมต้องใช้ Redux?
เมื่อแอปของคุณขยายตัวจนมีทั้งโปรไฟล์ผู้ใช้หรือตะกร้าสินค้า การมี store กลางจะช่วยให้การ debug ทำได้ง่ายขึ้น คุณสามารถตรวจสอบประวัติของ action เพื่อดูว่าข้อมูลเปลี่ยนไปเมื่อไหร่และเพราะอะไร มันทำหน้าที่เหมือนกล่องดำ (flight recorder) สำหรับเว็บไซต์ของคุณ
สรุป:
• Action: ข้อความที่อธิบายการเปลี่ยนแปลง • Reducer: ตรรกะ (logic) ที่ทำการเปลี่ยนแปลง • Dispatch: ตัวจุดชนวนที่ส่ง action ไปยัง logic
Source: https://dev.to/code_with_aravind/how-redux-works-in-simple-terms-1pkp