Lõigu lisamine Reduxi

Oleme valmistanud ette põhivahendid oma Redux rakenduse loomiseks, nüüd saame liikuda otse selle komponentide rakendamise juurde.

Sellel tunnil alustame mõistega lõigud (slices). Redux rakendusel on üks globaalne olek, mis on salvestatud poodi. See olek jaguneb lõikudeks. Tegelikult on lõik tükk poest, mis sisaldab algset olekut, reduktori ja toimingu loogikat rakenduse kindla osa jaoks.

Meie rakenduses esinevad tooted, seega esimene lõik, mille teeme, sisaldab teavet toodete kohta. Samuti on lõigu loomisel vaja lisada reduktor, mis teab, kuidas seda teavet töödelda.

Läheme kausta src ja loome kausta parts, seejärel selles kausta products - siia paneme kõik koodifailid, mis on seotud toodetega. Kaustas products loome faili productsSlice.js ja seejärel impordime sellesse RTK funktsiooni createSlice, mille abil loome lõike:

import { createSlice } from '@reduxjs/toolkit'

Nüüd loome toodete lõigu ja nimetame selle 'products'. Omaduse reducers jaoks jätame praegu tühjad looksulud:

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

Samuti peame määratlema initialState - lõigu oleku algseisundi, mis laaditakse rakenduse esmakordsel käivitamisel. Kirjutame selle kohe impordi järele ja enne lõigu loomist. Olgu see massiiv paarist objektist, mis sisaldavad toodetega seotud andmeid. Määrame iga toote jaoks id, nime, kirjelduse, hinna ja koguse:

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

Koodifaili lõpus võtame funktsiooni createSlice töö tulemusena selle poolt genereeritud reduktori ja ekspordime selle. See on meile kasulik teistes rakenduse failides:

export default productsSlice.reducer

Avage oma õpilaste rakendus. Looge selles fail studentsSlice.js, nagu on kirjeldatud tunnis. Looge selles abil createSlice lõik students. Lõigu algväärtusena olgu teil massiiv paarist objektist, mis sisaldavad õpilaste andmeid.

Iga õpilase jaoks tehke väljad: id, eesnimi, perekonnanimi, vanus ja eriala.

Faili studentsSlice.js lõpus eksportige saadud reducer, nagu on kirjeldatud tunnis.