Přidání slicu do Reduxu

Připravili jsme základní nástroje pro vytvoření naší Redux aplikace, nyní můžeme přejít přímo k realizaci jejích komponent.

V této lekci začneme s pojmem slicy (slices). Redux aplikace má jeden globální stav, který je uložen v store. Tento stav je rozdělen na slicy. V podstatě, slice je kousek úložiště, obsahující původní stav, logiku reduceru a akcí pro určitou část aplikace.

V naší aplikaci se budou vyskytovat produkty, proto první slice, který vytvoříme, bude obsahovat informace o produktech. Také při vytváření slicu je nutné přidat reducer, který ví, jak tyto informace zpracovávat.

Pojďme do složky src a vytvořme složku parts, a poté v ní složku products - sem budeme ukládat všechny soubory s kódem, týkající se produktů. V složce products vytvoříme soubor productsSlice.js, a poté importujeme z RTK funkci createSlice, pomocí které budeme vytvářet slicy:

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

Nyní vytvořme slice pro produkty a pojmenujme jej 'products'. Pro vlastnost reducers prozatím necháme prázdné složené závorky:

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

Také je nutné definovat initialState - počáteční stav slicu stavu, který bude načten při prvním spuštění aplikace. Napišme jej ihned po importu a před vytvořením slicu. Nechť je to pole z několika objektů, obsahujících data produktů. Uveďme pro každý produkt id, název, popis, cenu a množství:

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 kodu souboru z výsledku práce funkce createSlice vezmeme vygenerovaný reducer a exportujeme jej. Bude se nám hodit v dalších souborech aplikace:

parts/products/productsSlice.jsexport default productsSlice.reducer