Redux-и слайс илова кардан

Мо асбобҳои асосиро барои эҷоди барномаи Redux-и худ омода кардем, ҳоло мо метавонем бевосита ба амалӣ кардани компонентҳои он гузарем.

Дар ин дарс мо бо мафҳуми слайс (slices) оғоз мекунем. Барномаи Redux як ҳолати глобалӣ дорад, ки дар store нигоҳ дошта мешавад. Ин ҳолат ба слайсҳо тақсим мешавад. Дар асл, слайс - ин порчаи анбор аст, ки дар бар гирандаи ҳолати ибтидоӣ, мантиқи редюсер ва амалҳо барои як қисми муайяни барнома мебошад.

Дар барномаи мо маҳсулотҳо мавҷуданд, пас, аввалин слайсе, ки мо месозем, маълумоти дар бораи маҳсулотро дар бар хоҳад гирифт. Ҳамчунин, ҳангоми эҷоди слайс лозим аст редюсер илова карда шавад, ки медонад, чӣ гуна ин маълумотро коркард кунад.

Биёед ба папкаи src ворид шавем ва папкаи parts эҷод кунем, ва сипас дар он папкаи products эҷод кунем - ин ҷо мо ҳамаи failҳои рамзро, ки ба маҳсулот дахл доранд, мегузорем. Дар папкаи products мо файли productsSlice.js эҷод мекунем, ва сипас функсияи createSlice-ро аз RTK ба он ворид мекунем, ки бо ёрии он мо слайсҳоро эҷод мекунем:

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 редюсере, ки аз ҷониби он соҳибшудааст, гирифта ва онро содир мекунем. Он ба мо дар failҳои дигари барнома кӯмак мекунад:

export default productsSlice.reducer

Барномаи худро барои донишҷӯён кушоед. Дар он файли studentsSlice.js эҷод кунед, тавре ки дар дарс тавсиф шудааст. Дар он бо ёрии createSlice слайси students эҷод кунед. Дар ҳолати ибтидоии слайс бигзор дар шумо массиве аз як ҷуфт объект бошад, ки дар бар гирандаи маълумоти донишҷӯён бошад.

Барои ҳар як донишҷӯ майдонҳо созед: id, ном, насаб, синну сол ва ихтисос.

Дар охири файли studentsSlice.js редюсери ба даст омадаро содир кунед, тавре ки дар дарс тавсиф шудааст.