การเพิ่มอีกหนึ่ง slice ใน Redux

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

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

ตอนนี้ เช่นเดียวกับกรณีของสินค้า มาสร้าง slice สำหรับผู้ขายกันก่อน เริ่มต้นในโฟลเดอร์ sellers ให้สร้างไฟล์ sellersSlice.js และทำการ import createSlice เข้าไป:

import { createSlice } from '@reduxjs/toolkit'

ทำตามขั้นตอนมาตรฐานต่อไป เป็นค่าเริ่มต้นสำหรับ slice มาสร้างผู้ขายสี่ราย สำหรับความง่ายพวกเขาจะมีสองฟิลด์ - id และ name:

const initialState = [
	{ id: '0', name: 'Super Power' },
	{ id: '1', name: 'Miracle Life' },
	{ id: '2', name: 'Dolls&Toys' },
	{ id: '3', name: 'Granny' },
]

ด้านล่างใช้ createSlice สร้าง slice sellers ส่งค่าเริ่มต้นให้มัน เนื่องจากเราจะไม่เพิ่มผู้ขาย หรืออัปเดตข้อมูลของพวกเขาในภายหลัง ดังนั้นให้ฟิลด์ reducers ของเรายังคงว่างไว้ก่อน:

const sellersSlice = createSlice({
	name: 'sellers',
	initialState,
	reducers: {},
})

ท้ายไฟล์อย่าลืม export reducer ที่ได้:

export default sellersSlice.reducer

ตอนนี้เราจำเป็นต้องเปิดไฟล์ store.js ในโฟลเดอร์ app และ import reducer ที่ได้:

import sellersReducer from '../parts/sellers/sellersSlice'

จากนั้นกำหนดมันใน configureStore เป็น reducer สำหรับ sellers:

export default configureStore({
	reducer: {
		products: productsReducer,
		sellers: sellersReducer,
	},
})

เปิดแอปพลิเคชันนักเรียนของคุณ สร้างอีกหนึ่งโฟลเดอร์ teachers ที่นี่คุณจะมีไฟล์โค้ดที่เกี่ยวข้องกับอาจารย์ สร้างไฟล์ teachersSlice.js ภายในนั้น ใช้เนื้อหาจากบทเรียน สร้าง slice teachers ขึ้นมาด้วย createSlice

ให้แต่ละออบเจ็กต์ข้อมูลครูของคุณมีสามคุณสมบัติ: id, name (ซึ่งจะประกอบด้วยนามสกุลและชื่อย่อ เช่น 'Petrov A.V.') และวิชา (อะไรก็ได้ที่คุณคิดขึ้นมาได้ - ฟิสิกส์, คณิตศาสตร์, ชีววิทยา ฯลฯ) สร้างออบเจ็กต์ดังกล่าว 3 อันที่มีครูเป็นค่าเริ่มต้นสำหรับ slice

ทำการ import reducer ที่ได้ teachersReducer ลงใน store.js และกำหนดให้เป็น reducer สำหรับ teachers ตามที่แสดงในบทเรียน