Pridanie slicu do Redux

Pripravili sme základné nástroje pre vytvorenie našej Redux aplikácie, teraz môžeme prejsť priamo k realizácii jej komponentov.

Na tomto cvičení začneme s pojmom sliceov (slices). Redux aplikácia má jeden globálny stav, ktorý je uložený v store. Tento stav je rozdelený na slicey. V podstate, slice je kúsok úložiska, ktorý obsahuje pôvodný stav, logiku redukera a akcií pre určitú časť aplikácie.

V našej aplikácii budú figurovať produkty, preto prvý slice, ktorý vytvoríme, bude obsahovať informácie o produktoch. Tiež pri vytváraní slice je potrebné pridať reduker, ktorý vie, ako spracovať tieto informácie.

Poďme do priečinka src a vytvorme priečinok parts, a potom v ňom priečinok products - sem budeme ukladať všetky súbory s kódom, ktoré sa týkajú produktov. V priečinku products vytvoríme súbor productsSlice.js, a potom importujeme do neho z RTK funkciu createSlice, pomocou ktorej budeme vytvárať slicey:

import { createSlice } from '@reduxjs/toolkit'

Teraz poďme vytvoriť slice pre produkty a nazvime ho 'products'. Pre vlastnosť reducers zatiaľ necháme prázdne zložené zátvorky:

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

Tiež musíme definovať initialState - počiatočný stav slice stavu, ktorý sa načíta pri prvom spustení aplikácie. Napíšme ho hneď po importe a pred vytvorením slice. Nech je to pole z niekoľkých objektov, ktoré obsahujú údaje o produktoch. Uveďme pre každý produkt id, názov, popis, cenu a množstvo:

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

Na konci kódu súboru z výsledku práce funkcie createSlice vezmeme vygenerovaný reduker a exportujeme ho. Bude sa nám hodiť v iných súboroch aplikácie:

export default productsSlice.reducer

Otvorte vašu aplikáciu pre študentov. Vytvorte v nej súbor studentsSlice.js, ako je popísané v lekcii. Vytvorte v ňom pomocou createSlice slice students. Ako počiatočná hodnota slice nech je pole z niekoľkých objektov, ktoré obsahujú údaje o študentoch.

Pre každého študenta urobte polia: id, meno, priezvisko, vek a špecializácia.

Na konci súboru studentsSlice.js exportujte získaný reduker, ako je popísané v lekcii.