การแลกเปลี่ยนข้อมูลระหว่างแอปพลิเคชัน Redux และเซิร์ฟเวอร์

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

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

ในชีวิตจริง มักจะมีสถานการณ์ที่แอปพลิเคชัน จำเป็นต้องมีตรรกะแบบอะซิงโครนัสด้วย เช่น เมื่อ ทำงานกับคำขอ HTTP API และการรับข้อมูล จากเซิร์ฟเวอร์ภายนอก ดังนั้นเพื่อให้ Redux store ที่เป็นแบบ 'ซิงโครนัส' ของเราสามารถทำงาน กับตรรกะอะซิงโครนัสเช่นนี้ได้ จึงใช้สิ่งที่เรียกว่า middleware - ซอฟต์แวร์ ที่ทำหน้าที่เป็นตัวกลางหรือตัวเชื่อมระหว่าง store ของแอปพลิเคชันของเรา และ เช่น เซิร์ฟเวอร์ ซึ่งเราจะเริ่มทำงานใน บทของคู่มือการสอนนี้

สำหรับ Redux มี middleware ดังกล่าวถูกสร้างขึ้นมากมาย อย่างไรก็ตาม ที่แพร่หลายมากที่สุดในหมู่ พวกเขา และเป็นที่แนะนำอย่างเป็นทางการเมื่อทำงานกับแอปพลิเคชัน Redux ที่มีตรรกะแบบอะซิงโครนัส ยังคงเป็น Redux Thunk ซอฟต์แวร์นี้ช่วยให้เราใช้ ฟังก์ชันธรรมดา (หรือ thunks) ซึ่งสามารถบรรจุ ตรรกะแบบอะซิงโครนัสไว้ภายในได้ เช่น setTimeout, Promises, async/await, เพื่อโต้ตอบกับ store ของเรา สำหรับ ตัวคำศัพท์เอง, thunk คือโค้ดที่ ทำงานแบบเลื่อนออกไป (delayed work)

ตอนนี้ เราได้ทำความรู้จักคร่าวๆ กับวิธี การทำงานกับตรรกะแบบอะซิงโครนัสใน Redux แล้ว เราสามารถเริ่มต้นการนำขั้นตอนนี้ ไปใช้ในแอปพลิเคชันของเราได้ เราต้องทำให้ แอปพลิเคชันของเราสามารถโต้ตอบกับ เซิร์ฟเวอร์ภายนอกบางแห่งได้ โดยรับและส่ง ข้อมูลไปยังเซิร์ฟเวอร์นั้น กล่าวคือ ข้างหน้ายังมี หัวข้อที่น่าตื่นเต้นและสำคัญมากรอเราอยู่ เริ่มกันเลย