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 үчүн редьюсер катары тагаңыз.