Redux-ке слайс қосу

Біз Redux қолданушысын жасау үшін қажетті негізгі құралдарды дайындадық, енді біз оның компоненттерін жүзеге асыруға көшуге болады.

Бұл сабақта біз слайстар (slices) тұжырымдамасынан бастаймыз. Redux қолданушысының store-да сақталатын бір жаһандық күйі бар. Бұл күй слайстарға бөлінеді. Негізіnde, слайс - бұл белгілі бір бөлігі үшін бастапқы күйді, редьюсер мен экшендердің логикасын қамтитын сақталыштың бөлігі.

Біздің қолданушымызда өнімдер болады, сәйкесінше біз жасайтын бірінші слайс өнімдер туралы ақпаратты қамтиды. Сондай-ақ, слайсты жасау кезінде бұл ақпаратты қалай өңдеу керектігін білетін редьюсерді қосу қажет.

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-ді экспорттаңыз.