Redux-та тағы бір слайс қосу

Алдыңғы сабақтарда біз өнімдер үшін products слайсінде тығыз жұмыс істедік. Нақты Redux қолдануында әртүрлі мақсаттар үшін стейтте көптеген слайстер болуы мүмкін. Сондықтан бұл сабақта біз state-ке сатушылар үшін тағы бір слайс қосамыз, олар іс жүзінде біздің қолдануымызда өнімдерді қосатын болады.

Өнімдерімізбен қолдануымызды ашып, бірінші іс ретінде parts бумасында тағы бір sellers бумасын құрамыз, мұнда біз сатушыларға қатысты барлық код пен компоненттерді орналастырамыз.

Енді, өнімдердегідей, сатушылар үшін слайс құрайық. Алдымен sellers бумасында sellersSlice.js файлын құрып, оған createSlice импортын жасаймыз:

import { createSlice } from '@reduxjs/toolkit'

Стандартты қадамдарды жасауды жалғастырамыз. Слайс үшін бастапқы мән ретінде төрт сатушыны құрайық. Қарапайымдылық үшін оларда екі өріс болсын - id және name:

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

Төменде createSlice көмегімен sellers слайсін құрамыз, оған бастапқы мәнін береміз. Біз болашақта сатушыларды қоспайтындықтан, не олардың деректерін жаңартпайтындықтан, редьюсерлер өрісі бізде бос қалсын:

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

Файлдың соңында алынған редьюсерді экспорттауды ұмытпайық:

export default sellersSlice.reducer

Енді бізге app бумасындағы store.js файлын ашып, алынған редьюсерді импорттау керек:

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

Содан кейін оны configureStore-та sellers үшін редьюсер ретінде тағайындау керек:

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

Студенттеріңізбен қолдануыңызды ашыңыз. Тағы бір teachers бумасын құрыңыз, мұнда сізде оқытушыларға қатысты код файлдары болады. Онда teachersSlice.js файлын құрыңыз. Сабақ материалын пайдаланып, онда createSlice көмегімен teachers слайсін құрыңыз.

Әрбір оқытушы дерек объектісінде үш қасиет болсын: id, name (оған тегі және бастапқы әріптері жазылсын, мысалы 'Петров А.В.') және пән (өзіңіз ойлап табыңыз - физика, математика, биология және т.б.). Слайс үшін бастапқы мән ретінде 3 осындай оқытушы объектісін жасаңыз.

Алынған teachersReducer редьюсерін store.js-ға импорттап, оны сабақта көрсетілгендей, teachers үшін редьюсер ретінде тағайындаңыз.