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:

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

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

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

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

sellers/sellersSlice.jsexport default sellersSlice.reducer

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

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

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

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