Přidání slicu do Reduxu

Připravili jsme základní nástroje pro vytvoření naší Redux aplikace, nyní můžeme přejít přímo k realizaci jejích komponent.

V této lekci začneme s pojmem slicy (slices). Redux aplikace má jeden globální stav, který je uložen v store. Tento stav je rozdělen na slicy. V podstatě, slice je kousek úložiště, obsahující původní stav, logiku reduceru a akcí pro určitou část aplikace.

V naší aplikaci se budou vyskytovat produkty, proto první slice, který vytvoříme, bude obsahovat informace o produktech. Také při vytváření slicu je nutné přidat reducer, který ví, jak tyto informace zpracovávat.

Pojďme do složky src a vytvořme složku parts, a poté v ní složku products - sem budeme ukládat všechny soubory s kódem, týkající se produktů. V složce products vytvoříme soubor productsSlice.js, a poté importujeme z RTK funkci createSlice, pomocí které budeme vytvářet slicy:

import { createSlice } from '@reduxjs/toolkit'

Nyní vytvořme slice pro produkty a pojmenujme jej 'products'. Pro vlastnost reducers prozatím necháme prázdné složené závorky:

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

Také je nutné definovat initialState - počáteční stav slicu stavu, který bude načten při prvním spuštění aplikace. Napišme jej ihned po importu a před vytvořením slicu. Nechť je to pole z několika objektů, obsahujících data produktů. Uveďme pro každý produkt id, název, popis, cenu a množství:

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 kodu souboru z výsledku práce funkce createSlice vezmeme vygenerovaný reducer a exportujeme jej. Bude se nám hodit v dalších souborech aplikace:

export default productsSlice.reducer

Otevřete vaši aplikaci pro studenty. Vytvořte v ní soubor studentsSlice.js, jak je popsáno v lekci. Vytvořte v něm pomocí createSlice slice students. Jako počáteční hodnotu slicu nechť u vás je pole z několika objektů, obsahujících data studentů.

Pro každého studenta vytvořte pole: id, jméno, příjmení, věk a specializace.

Na konci souboru studentsSlice.js exportujte získaný reducer, jak je popsáno v lekci.