การเปลี่ยนแปลงโครงสร้างสถานะใน Redux

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

เปิดแอปพลิเคชันผลิตภัณฑ์ของเรา และในนั้น เปิดไฟล์ productsSlice.js โปรดสังเกต นิยาม initialState เดิมที slice ของเรา สำหรับผลิตภัณฑ์ productsSlice - คืออาร์เรย์ซึ่ง ประกอบด้วยอ็อบเจกต์ (ในกรณีของเรามีสองอ็อบเจกต์) ที่มีข้อมูล ของผลิตภัณฑ์ ประการแรก เนื่องจากตอนนี้เราจะ โหลดข้อมูลจากเซิร์ฟเวอร์ เราจึงต้องลบข้อมูลเหล่านี้ออกจาก initialState ประการที่สอง เราจะส่ง คำขอ API ไปยังเซิร์ฟเวอร์ และมันจะสำคัญสำหรับเราที่จะรู้สถานะของคำขอนั้น เมื่อพิจารณาสองสิ่งนี้แล้ว ให้เรา ปรับเปลี่ยน initialState ใหม่ คราวนี้ให้มัน เป็นเพียงอ็อบเจกต์ที่มีคุณสมบัติ products (ในตอนแรกจะไม่มีข้อมูลใด ๆ ที่นี่ แต่ จะเป็นเพียงอาร์เรย์ว่าง), status และ error ตอนนี้โค้ดของเราสำหรับ initialState จะ สั้นลงเล็กน้อย:

const initialState = {
	products: [],
	status: 'idle',
	error: null,
}

ในตอนนี้เราตั้งค่าสถานะเป็น 'idle' (ไม่ได้ทำอะไร) เพราะในตอนแรกเราไม่ได้ส่งคำขอใดๆ แต่โดยทั่วไปแล้วมันจะเปลี่ยนแปลงและสามารถ รับค่าได้ เช่น 'กำลังโหลด', 'สำเร็จ', 'ข้อผิดพลาดในการโหลด' โปรดจำไว้ว่า สำหรับการระบุ สถานะ คุณสามารถเลือกชื่อใดก็ได้ที่ สะดวกสำหรับคุณ

เลื่อนลงมาดูโค้ดด้านล่างต่อ หลังจากเปลี่ยนแปลง initialState แล้ว เราต้องเปลี่ยนโค้ดในส่วนที่ เราทำงานกับสถานะนี้ในฟังก์ชันรีดิวเซอร์ด้วย มาดูโค้ดสำหรับ productAdded:

state.push(action.payload)

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

state.products.push(action.payload)

ดังนั้น ให้ดำเนินการเปลี่ยนแปลงเดียวกัน สำหรับรีดิวเซอร์ reactionClicked แทนที่:

const currentProduct = state.find((product) => product.id === productId)

ตอนนี้จะเป็น:

const currentProduct = state.products.find((product) => product.id === productId)

แทนที่ state ด้วย state.products ด้วยตัวเองในโค้ดของรีดิวเซอร์ productUpdated

เปิดแอปพลิเคชันนักเรียนของคุณ เปิดไฟล์ studentsSlice.js ในนั้น ให้ initialState ของคุณตอนนี้มี คุณสมบัติสามประการ: students, status, error - ปรับเปลี่ยนมันใหม่ ดังที่แสดง ในบทเรียน

ดำเนินการเปลี่ยนแปลงที่สอดคล้องกันและ ในโค้ดด้านล่างด้วย แทนที่ state ด้วย state.students ในโค้ดสำหรับ ฟังก์ชันรีดิวเซอร์ทั้งสามของคุณ