รีดิวเซอร์ใน Redux

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

ต้องจำไว้ว่ารีดิวเซอร์มีข้อจำกัดหลายประการ รีดิวเซอร์อัปเดต state เฉพาะบนพื้นฐานของค่าปัจจุบันของ state และวัตถุ action ที่ได้รับเท่านั้น จากนั้นจึงตัดสินใจ ว่าจะเปลี่ยน state อย่างไรและส่งคืนค่าของ state ใหม่

เรารู้ว่าด้วยค่าเริ่มต้นแล้ววัตถุและอาร์เรย์ ใน JavaScript นั้น mutable (เปลี่ยนแปลงได้) เช่นเดียวกัน เรารู้ว่าเราไม่สามารถเปลี่ยน state โดยตรงได้ ในกรณีเช่นนี้ต้องทำงานกับสำเนาเท่านั้น รีดิวเซอร์ก็ต้องปฏิบัติตามกฎนี้ด้วย แต่การเขียนตรรกะแบบนี้ด้วยมืออาจเป็น เรื่องที่ค่อนข้างน่าเบื่อและซับซ้อน และ ตรงนี้เองที่ฟังก์ชัน createSlice เข้ามาช่วย ซึ่งใช้ไลบรารี Immer, เพื่อแปลงโค้ด 'mutable' ของคุณให้เป็น 'immutable' ดังนั้น การทำผิดและทำให้ ชีวิตง่ายขึ้นสามารถทำได้เฉพาะเมื่อใช้ฟังก์ชัน createSlice หรือ createReducer เท่านั้น

ข้อจำกัดของรีดิวเซอร์ยังรวมถึง การใช้ตรรกะแบบ asynchronous การคำนวณ ค่าสุ่ม และการดำเนินการอื่นๆ "side effects" ทีนี้ หลังจากได้รู้จักกับรีดิวเซอร์มากขึ้นแล้ว เรากลับมาที่แอปพลิเคชัน products ของเรา

ในแอปพลิเคชันของเรามี store ซึ่ง เราสร้างขึ้นในบทเรียนที่แล้ว แต่ตอนนี้ ยังไม่มีอะไรในนั้นเลย เราเปิดไฟล์ store.js ของเราและเพิ่มโค้ดเข้าไปเล็กน้อย เริ่มต้นด้วยการ import ฟังก์ชัน reducer สำหรับ products เข้าไป:

import productsReducer from '../parts/products/productsSlice'

ตอนนี้เราสามารถ ระบุฟังก์ชันที่ import มา productsReducer เป็นรีดิวเซอร์:

export default configureStore({
	reducer: {
		products: productsReducer
	}
})

ด้วยบรรทัดด้านบนนี้เราแจ้งให้ store ของเราทราบว่าตอนนี้เมื่อเกิด action ข้อมูลทั้งหมดสำหรับ slice state.products จะ ถูกอัปเดตโดยรีดิวเซอร์ productsReducer

ตอนนี้คุณสามารถรันแอปพลิเคชัน (สังเกตว่า คำเตือนเกี่ยวกับ รีดิวเซอร์ไม่ถูกต้องหายไปจากคอนโซล!) เปิด Redux DevTools ในเบราว์เซอร์และสำรวจแท็บต่างๆ เช่น การคลิกที่แท็บ State ในแท็บ Inspector เราสามารถเห็นวัตถุ products สองรายการของเรา ซึ่งแสดงเป็นค่าเริ่มต้นของ state เมื่อเริ่มรันแอปพลิเคชันครั้งแรก ในแท็บ Log monitor เราเห็นว่า state ส่วนกลางมี slice อะไรบ้าง - นั่นคือ slice products ซึ่งมีวัตถุสองรายการ และลองดูที่ แท็บ Chart ด้วย

เปิดแอปพลิเคชัน students ของคุณและ เปลี่ยนโค้ดไฟล์ store.js ดังที่ แสดงในบทเรียน

รันแอปพลิเคชันของคุณในเบราว์เซอร์ และสำรวจแท็บต่างๆ ของ extension Redux DevTools