Pridanie ďalšieho slicu do Redux

Na predchádzajúcich hodinách sme intenzívne pracovali na slice products pre produkty. V reálnej Redux aplikácii môže byť v state veľa sliceov pre rôzne účely. Preto v tejto lekcii pridáme do state ďalší slice pre predajcov, ktorí v skutočnosti budú pridávať produkty v našej aplikácii.

Otvorme našu aplikáciu s produktmi a prvou vecou, ktorú urobíme, je vytvorenie priečinka parts a v ňom ďalšieho priečinka sellers, kde umiestnime celý kód a komponenty týkajúce sa predajcov.

Teraz, rovnako ako v prípade produktov, vytvorme slice pre predajcov. Na začiatok v priečinku sellers vytvorme súbor sellersSlice.js a importujme do neho createSlice:

import { createSlice } from '@reduxjs/toolkit'

Pokračujeme v štandardných krokoch. Ako počiatočnú hodnotu pre slice vytvorme štyroch predajcov. Pre jednoduchosť budú mať dve polia - id a name:

const initialState = [
	{ id: '0', name: 'Super Power' },
	{ id: '1', name: 'Miracle Life' },
	{ id: '2', name: 'Dolls&Toys' },
	{ id: '3', name: 'Granny' },
]

Nižšie pomocou createSlice vytvorme slice sellers, predajme mu počiatočnú hodnotu. Pretože nebudeme pridávať predajcov, ani aktualizovať ich údaje v budúcnosti, tak pole s reducermi nechajme zatiaľ prázdne:

const sellersSlice = createSlice({
	name: 'sellers',
	initialState,
	reducers: {},
})

Na konci súboru nezabudnime na export výsledného reduceru:

export default sellersSlice.reducer

Teraz musíme otvoriť súbor store.js v priečinku app a importovať získaný reducer:

import sellersReducer from '../parts/sellers/sellersSlice'

A potom priradiť ho v configureStore ako reducer pre sellers:

export default configureStore({
	reducer: {
		products: productsReducer,
		sellers: sellersReducer,
	},
})

Otvorte svoju aplikáciu so študentmi. Vytvorte ďalší priečinok teachers, tu budú mať súbory s kódom, ktoré sa týkajú učiteľov. Vytvorte v ňom súbor teachersSlice.js. Použitím materiálov lekcie vytvorte v ňom slice teachers pomocou createSlice.

Nech má každý objekt s údajmi učiteľa tri vlastnosti: id, name (ktoré bude obsahovať priezvisko a iniciály, napríklad 'Petrov A.V.') a predmet (akýkoľvek, ktorý vymyslíte - fyzika, matematika, biológia atď.). Vytvorte 3 takéto objekty s učiteľmi ako počiatočnú hodnotu pre slice.

Importujte získaný reducer teachersReducer do store.js a priraďte ho ako reducer pre teachers, ako je ukázané v lekcii.