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:

parts/sellers/sellersSlice.jsimport { 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:

sellers/sellersSlice.jsconst 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é:

sellers/sellersSlice.jsconst sellersSlice = createSlice({
  name: 'sellers',
  initialState,
  reducers: {},
})

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

sellers/sellersSlice.jsexport default sellersSlice.reducer

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

app/store.jsimport sellersReducer from '../parts/sellers/sellersSlice'

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

app/store.jsexport default configureStore({
  reducer: {
    products: productsReducer,
    sellers: sellersReducer,
  },
})