Reduxда яна слайс қўшиш

Олдинги дарсларда биз mahsulotlar учун products слайси устида иш қилдик. Реал Redux иловасида stateда турли мақсадлар учун кўп слайслар бўлиши мумкин. Шунинг учун бу дарсда биз stateda яна бир слайс қўшамиз, sotuvchilar учун, улар аслода бизнинг иловамизда mahsulotlar қўшадиган бўлади.

Иловамизни ochamiz va биринчи босқич, биз parts папкасида яна бир папка sellers яратамиз, бу ерда биз барча код ва компонентларни жойлаштирамиз, sotuvchilarga тегишли.

Энди, mahsulotlarдаги каби, келайлик sotuvchilar учун слайс яратайлик. Бошлаш учун sellers папкасида sellersSlice.js файлини яратамиз ва унга createSlice ни импорт қиламиз:

import { createSlice } from '@reduxjs/toolkit'

Стандарт қадамларни давом эттирамиз. Слайс учун бошланғич қиймат сифатида тортта sotuvchi яратамиз. Соддалиги учун уларнинг икки майдони бўлади - 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, унга бошланғич қийматни берамиз. Чунки биз sotuvchilarni қўшмаймиз, уларнинг маълумотларини янада янгиламаймиз, бас редьюсерлар майдони бизда бўш қолсин:

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

Файл охирида олинган редьюсерни экспорт қилишни унутмаймиз:

export default sellersSlice.reducer

Энди бизга store.js файлини очиш керак app папкасида ва олинган редьюсерни импорт қилиш керак:

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

Ва сўнгра configureStore да уни sellers учун редьюсер сифатида белгилаш керак:

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

Сизнинг ўқувчилар билан илованизни oching. Яна бир папка teachers яратинг, бу ерда сиз код билан файллар бўлади, o'qituvchilarга тегишли. Унда файл яратинг teachersSlice.js. Дарс материалларидан фойдаланиб, унда teachers слайсини яратинг createSlice ёрдамида.

Ҳар бир объектда маълумотлар бўлсин o'qituvchi учун сизда уч та хусусият бўлсин: id, name (у фамилия ва инициалларни ўз ичига олади, масалан 'Петров А.В.') ва фан (истаган, ўйлаб топган - физика, математика, биология ва ҳ.к.). 3 та бундай объект яратинг o'qituvchilar билан слайс учун бошланғич қиймат сифатида.

Олинган редьюсерни импорт қилинг teachersReducer ни store.js га ва уни редьюсер сифатида белгиланг teachers учун, дарсда кўрсатилгани каби.