Pridanie slicu do Redux

Pripravili sme základné nástroje pre vytvorenie našej Redux aplikácie, teraz môžeme prejsť priamo k realizácii jej komponentov.

Na tomto cvičení začneme s pojmom sliceov (slices). Redux aplikácia má jeden globálny stav, ktorý je uložený v store. Tento stav je rozdelený na slicey. V podstate, slice je kúsok úložiska, ktorý obsahuje pôvodný stav, logiku redukera a akcií pre určitú časť aplikácie.

V našej aplikácii budú figurovať produkty, preto prvý slice, ktorý vytvoríme, bude obsahovať informácie o produktoch. Tiež pri vytváraní slice je potrebné pridať reduker, ktorý vie, ako spracovať tieto informácie.

Poďme do priečinka src a vytvorme priečinok parts, a potom v ňom priečinok products - sem budeme ukladať všetky súbory s kódom, ktoré sa týkajú produktov. V priečinku products vytvoríme súbor productsSlice.js, a potom importujeme do neho z RTK funkciu createSlice, pomocou ktorej budeme vytvárať slicey:

parts/products/productsSlice.jsimport { createSlice } from '@reduxjs/toolkit'

Teraz poďme vytvoriť slice pre produkty a nazvime ho 'products'. Pre vlastnosť reducers zatiaľ necháme prázdne zložené zátvorky:

parts/products/productsSlice.jsconst productsSlice = createSlice({
  name: 'products',
  initialState,
  reducers: {}
})

Tiež musíme definovať initialState - počiatočný stav slice stavu, ktorý sa načíta pri prvom spustení aplikácie. Napíšme ho hneď po importe a pred vytvorením slice. Nech je to pole z niekoľkých objektov, ktoré obsahujú údaje o produktoch. Uveďme pre každý produkt id, názov, popis, cenu a množstvo:

parts/products/productsSlice.jsconst 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 kódu súboru z výsledku práce funkcie createSlice vezmeme vygenerovaný reduker a exportujeme ho. Bude sa nám hodiť v iných súboroch aplikácie:

parts/products/productsSlice.jsexport default productsSlice.reducer