Přidání dalšího slicu do Reduxu

Na předchozích lekcích jsme intenzivně pracovali na slicu products pro produkty. V reálné Redux aplikaci může být ve stavu mnoho sliceů pro různé účely. Proto v této lekci přidáme do state další slice pro prodejce, kteří ve skutečnosti budou přidávat produkty v naší aplikaci.

Otevřeme naši aplikaci s produkty a první, co uděláme, je, že ve složce parts vytvoříme další složku sellers, zde budeme umisťovat veškerý kód a komponenty, týkající se prodejců.

Nyní, stejně jako v případě produktů, vytvořme slice pro prodejce. Pro začátek ve složce sellers vytvoříme soubor sellersSlice.js a importujeme do něj createSlice:

import { createSlice } from '@reduxjs/toolkit'

Pokračujeme standardními kroky. Jako počáteční hodnotu pro slice vytvoříme čtyři prodejce. Pro jednoduchost budou mít dvě pole - id a name:

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

Níže pomocí createSlice vytvoříme slice sellers, předáme mu počáteční hodnotu. Protože nebudeme přidávat prodejce, ani aktualizovat jejich data v budoucnu, nechme pole s reducery prozatím prázdné:

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

Na konci souboru nezapomeňme na export výsledného reduceru:

export default sellersSlice.reducer

Nyní potřebujeme otevřít soubor store.js ve složce app a importovat získaný reducer:

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

A poté jej přiřadit v configureStore jako reducer pro sellers:

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

Otevřete vaši aplikaci se studenty. Vytvořte další složku teachers, zde budete mít soubory s kódem, týkající se učitelů. Vytvořte v ní soubor teachersSlice.js. S využitím materiálů lekce vytvořte v něm slice teachers pomocí createSlice.

Nechť každý objekt s daty učitele má tři vlastnosti: id, name (které bude obsahovat příjmení a iniciály, například 'Petrov A.V.') a předmět (libovolný, který vymyslíte - fyzika, matematika, biologie atd.). Vytvořte 3 takové objekty s učiteli jako počáteční hodnotu pro slice.

Importujte získaný reducer teachersReducer do store.js a přiřaďte jej jako reducer pro teachers, jak je ukázáno v lekci.