Redux'ке слайс кошуу

Биз өзүбүздүн Redux колдонмобузду түзүү үчүн негизги куралдарды даярдадык, эми биз анын компоненттерин ишке ашырууга түздөн-түз өтө алабыз.

Бул сабакта биз слайстар (slices) түшүнүгүнөн баштайбыз. Redux колдонмо store'до сакталган бир глобалдык стейтке ээ. Бул стейт слайстарга бөлүнөт. Чындыгында, слайс - бул колдонмонун белгилүү бир бөлүгү үчүн баштапкы стейтти, редьюсердин жана экшендердин логикасын камтыган кампаламанын бир бөлүгү.

Биздин колдонмобузда продукттар кездешет, ошондуктан биз жасай турган биринчи слайс, продукттар жөнүндө маалыматты камтышы керек. Ошондой эле слайс түзүүдө бул маалыматты кантип иштетүүнү билген редьюсерди кошуу зарыл.

Келгиле, src папкасына кирип, parts папкасын түзөлү, андан кийин анын ичинде products папкасын - биз продукттарга тиешелүү бардык код файлдарын ушул жерге топтообуз. 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'ди экспорттоңуз.