Sadaļas pievienošana Redux

Mēs esam sagatavojuši galvenos rīkus mūsu Redux lietotnes izveidei, tagad varam pāriet tieši pie tās komponenšu realizācijas.

Šajā nodarbībā mēs sāksim ar jēdzienu sadaļas (slices). Redux lietotnei ir viens globāls stāvoklis, kas tiek glabāts store. Šis stāvoklis tiek sadalīts sadaļās. Faktiski, sadaļa ir store daļa, kas satur sākotnējo stāvokli, reducera loģiku un action konkrētai lietotnes daļai.

Mūsu lietotnē būs produkti, attiecīgi pirmā sadaļa, ko mēs izveidosim, saturēs informāciju par produktiem. Arī, veidojot sadaļu, ir jāpievieno reducer, kas zina, kā apstrādāt šo informāciju.

Ieejam mapē src un izveidosim mapi parts, un tad tajā mapi products - šeit mēs ievietosim visus koda failus, kas attiecas uz produktiem. Mapē products mēs izveidosim failu productsSlice.js, un tad importēsim no RTK funkciju createSlice, ar kuras palīdzību mēs veidosim sadaļas:

import { createSlice } from '@reduxjs/toolkit'

Tagad izveidosim sadaļu produktiem un nosauksim to par 'products'. Īpašībai reducers mēs pagaidām atstāsim tukšas cirtainas iekavas:

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

Arī mums ir jādefinē initialState - sadaļas stāvokļa sākotnējais stāvoklis, kas tiks ielādēts pirmajā lietotnes palaišanas reizē. Uzrakstīsim to uzreiz pēc importa un pirms sadaļas izveides. Lai tas būtu masīvs no pāris objektiem, kas satur produktu datus. Katrai precei norādīsim id, nosaukumu, aprakstu, cenu un daudzumu:

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',
	},
]

Koda faila beigās mēs no funkcijas createSlice darba rezultāta paņemsim ģenerēto reducer un eksportēsim to. Tas noderēs mums citos lietotnes failos:

export default productsSlice.reducer

Atveriet savu studentu lietotni. Izveidojiet tajā failu studentsSlice.js, kā aprakstīts nodarbībā. Izveidojiet tajā ar createSlice palīdzību sadaļu students. Kā sadaļas sākotnējā vērtība lai jums ir masīvs no pāris objektiem, kas satur studentu datus.

Katram studentam izveidojiet laukus: id, vārds, uzvārds, vecums un specialitāte.

Faila studentsSlice.js beigās eksportējiet iegūto reducer, kā aprakstīts nodarbībā.