Slice pridėjimas į Redux

Mes paruošėme pagrindinius įrankius savo Redux programai kurti, dabar galime pereiti tiesiaiiai prie jos komponentų įgyvendinimo.

Šioje pamokoje pradėsime nuo sąvokos slice'ų (slices). Redux programa turi vieną globalią būseną, kuri saugoma store. Ši būsena yra suskaidoma į slice'us. Tiesą sakant, slice'as yra store'o dalis, kurioje yra pradinė būsena, reducerio logika ir action'ai konkrečiai programos daliai.

Mūsų programoje bus figūruojami produktai, atitinkamai pirmasis slice'as, kurį sukursime, talpins informaciją apie produktus. Taip pat, kurdami slice'ą, būtina pridėti reducerį, kuris žino, kaip apdoroti šią informaciją.

Įeikime į aplanką src ir sukurkime aplanką parts, o joje - aplanką products - čia mes sudėsime visus failus su kodu, susijusiu su produktais. Aplanke products sukursime failą productsSlice.js, o tada importuosime jame iš RTK funkciją createSlice, kurios pagalba ir kursime slice'us:

import { createSlice } from '@reduxjs/toolkit'

Dabar sukurkime produktų slice'ą ir pavadinkime jį 'products'. Savybei reducers kol kas palikime tuščias riestines skliaustus:

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

Taip pat mums reikia apibrėžti initialState - pradinę slice'o būsenos būseną, kuri bus įkelta pirmą kartą paleidus programą. Parašykime ją iškart po importo ir prieš kuriant slice'ą. Tegul tai bus masyvas iš poros objektų, kuriuose yra produktų duomenys. Nurodykime kiekvienam produktui id, pavadinimą, aprašymą, kainą ir kiekį:

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

Kodo failo pabaigoje mes iš funkcijos createSlice darbo rezultato paimsime jos sugeneruotą reducerį ir eksportuosime jį. Jis mums pravers kituose programos failuose:

export default productsSlice.reducer

Atidarykite savo studentų programą. Sukurkite joje failą studentsSlice.js, kaip aprašyta pamokoje. Sukurkite jame pagalba createSlice slice'ą students. Kaip pradinę slice'o reikšmę tegul Jums bus masyvas iš poros objektų, kuriuose yra studentų duomenys.

Kiekvienam studentui padarykite laukus: id, vardas, pavardė, amžius ir specialybė.

Failo studentsSlice.js pabaigoje eksportuokite gautą reducerį, kaip aprašyta pamokoje.