การเพิ่ม Slice ใน Redux

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

ในบทเรียนนี้เราจะเริ่มจากแนวคิดของ slice (slices) แอปพลิเคชัน Redux มี state ระดับโลกเพียงตัวเดียว ซึ่งเก็บไว้ใน store state นี้ จะถูกแบ่งออกเป็น slice หลายๆ อัน จริงๆ แล้ว slice คือส่วนหนึ่งของ store ที่ประกอบด้วย state เริ่มต้น ตรรกะของ reducer และ action สำหรับส่วนใดส่วนหนึ่งของแอปพลิเคชันโดยเฉพาะ

ในแอปพลิเคชันของเราจะมี สินค้า ดังนั้น slice แรก ที่เราจะสร้าง จะเก็บข้อมูล เกี่ยวกับสินค้า นอกจากนี้เมื่อสร้าง slice จำเป็นต้องเพิ่ม reducer ที่ รู้วิธีประมวลผลข้อมูลนี้

เข้าไปในโฟลเดอร์ src แล้วสร้าง โฟลเดอร์ parts ขึ้นมา จากนั้นในนั้นสร้างโฟลเดอร์ products - เราจะเก็บไฟล์โค้ดทั้งหมดที่เกี่ยวข้องกับสินค้าไว้ที่นี่ ใน โฟลเดอร์ products เราจะสร้างไฟล์ productsSlice.js จากนั้น import ฟังก์ชัน createSlice จาก RTK เข้ามา ซึ่งเราจะใช้ สร้าง slice:

import { createSlice } from '@reduxjs/toolkit'

ตอนนี้เรามาสร้าง slice สำหรับสินค้า และตั้งชื่อว่า 'products' สำหรับ คุณสมบัติ reducers เราจะปล่อยไว้เป็น วงเล็บปีกกาว่างๆ ก่อน:

const productsSlice = createSlice({
	name: 'products',
	initialState,
	reducers: {}
})

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

const initialState = [
	{
		id: '1',
		title: 'Product1',
		desc: 'นี่คือสินค้าที่ยอดเยี่ยม',
		price: '300',
		amount: '30',
	},
	{
		id: '2',
		title: 'Product2',
		desc: 'นี่คือสินค้าดีๆ',
		price: '700',
		amount: '12',
	},
]

ท้ายโค้ดไฟล์ เราจะนำ reducer ที่สร้างขึ้นจากผลลัพธ์ของฟังก์ชัน createSlice และ export ออกไป มันจะมีประโยชน์ สำหรับเราในไฟล์อื่นๆ ของแอปพลิเคชัน:

export default productsSlice.reducer

เปิดแอปพลิเคชันสำหรับนักเรียนของคุณ สร้างไฟล์ studentsSlice.js ในนั้น ตามที่อธิบายในบทเรียน สร้าง slice students ในนั้นโดย ใช้ createSlice ใน ฐานะค่าเริ่มต้นของ slice ให้ คุณมีอาร์เรย์ของอ็อบเจ็กต์สองสามอัน ซึ่งมี ข้อมูลนักเรียน

สำหรับนักเรียนแต่ละคน ให้สร้างฟิลด์: id, ชื่อ, นามสกุล, อายุ และสาขาวิชาเอก

ท้ายไฟล์ studentsSlice.js ให้ export reducer ที่ได้ ตามที่ อธิบายไว้ในบทเรียน