Redux-га слайс қўшиш

Биз Redux иловамизни яратиш учун асосий асбобларни тайёрладик, энди биз унинг компонентларини амалга оширишга тўғридан-тўғри ўтишимиз мумкин.

Бу машғулотда биз слайслар (slices) тушунчасидан бошлаймиз. Redux иловаси store-да сақланадиган битта глобал стэйтга эга. Бу стэйт слайсларга бўлинади. Аслода, слайс - бу илованинг муайян қисми учун босланғич стэйтни, редьюсер ва экшенлар логикасини ўз ичига олган хранилищанинг бир бўлаги.

Бизнинг иловамизда маҳсулотлар мавжуд бўлади, шунинг учун биз яратадиган биринчи слайс маҳсулотлар ҳақида маълумотни ўз ичига олади. Шунингдек, слайс яратилганда бу маълумотни қандай қайта ишлашни биладиган редьюсерни қўшиш зарур.

Келинг src папкасига кириб parts папкасини яратамиз, сўнгра унинг ичида products папкасини яратамиз - бу ерга биз маҳсулотларга тегишли барча код файлларини joylayмиз. products папкасида биз productsSlice.js файлини яратамиз, сўнгра унга RTK дан createSlice функциясини импорт қиламиз, ёрдамида биз слайсларни яратамиз:

import { createSlice } from '@reduxjs/toolkit'

Энди келинг маҳсулотлар учун слайс яратамиз ва уни 'products' деб атаймиз. reducers хусусияти учун биз ҳозирча бўш қавсларни қолдирамиз:

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

Шунингдек, бизга initialState - илова биринчи марта ишга тушганида юкланадиган стэйт слайсининг босланғич ҳолатини аниқлаш зарур. Уни импортдан кейин ва слайс яратишдан олдин дарҳол ёзайлик. У бир нечта маҳсулот маълумотларини ўз ичига олган объектлар массиви бўлсин. Ҳар бир маҳсулот учун id, номи, тавсифи, нархи ва миқдорини кўрсатамиз:

const initialState = [
	{
		id: '1',
		title: 'Product1',
		desc: 'This is an amazing product',
		price: '300',
		amount: '30',
	},
	{
		id: '2',
		title: 'Product2',
		desc: 'This is a nice product',
		price: '700',
		amount: '12',
	},
]

Файл коди охирида биз функция натижасидан createSlice у томонидан яратилган reducer ни оламиз ва уни экспорт қиламиз. У бизга илованинг бошқа файлларида керак бўлади:

export default productsSlice.reducer

Студентлар учун мўлжалланган иловангизни очинг. Унда дарсда тавсифланганидек studentsSlice.js файлини яратинг. Унда createSlice ёрдамида students слайсини яратинг. Слайснинг босланғич қиймати сизда студентлар маълумотларини ўз ичига олган бир нечта объектлар массиви бўлсин.

Ҳар бир студент учун майдонлар яратинг: id, исми, фамилияси, ёши ва мутахассислиги.

studentsSlice.js файли охирида олдинги дарсда тавсифланганидек олинган reducer ни экспорт қилинг.