Szelet hozzáadása a Redux-hoz

Elkészítettük a fő eszközöket a Redux alkalmazásunk létrehozásához, most közvetlenül áttérhetünk annak komponenseinek megvalósítására.

Ezen az órán a szeletek (slices) fogalmával kezdjük. A Redux alkalmazásnak egy globális állapota van, amely a store-ban tárolódik. Ezt az állapotot szeletekre bontjuk. Tulajdonképpen a szelet a tároló egy darabja, amely tartalmazza a kezdeti állapotot, a reducer és az action-ok logikáját az alkalmazás egy adott részéhez.

Alkalmazásunkban termékek szerepelnek, ennek megfelelően az első szelet, amit készítünk, a termékekkel kapcsolatos információkat fogja tartalmazni. A szelet létrehozásakor szükséges hozzáadni egy reducert, amely tudja, hogyan kell feldolgozni ezeket az információkat.

Menjünk a src mappába és hozzunk létre egy parts mappát, majd abban egy products mappát - ide fogjuk rakni minden, a termékekhez kapcsolódó kódfájlt. A products mappában hozzunk létre egy productsSlice.js fájlt, majd importáljuk bele az RTK-ből a createSlice függvényt, amellyel a szeleteket fogjuk létrehozni:

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

Most hozzuk létre a termékek szeletjét és nevezzük el 'products'-nek. A reducers tulajdonsághoz egyelőre hagyjunk üres kapcsos zárójeleket:

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

Szükséges továbbá meghatároznunk a initialState-t - a state szelet kezdeti állapotát, amely az alkalmazás első indításakor betöltődik. Írjuk meg azonnal az import után és a szelet létrehozása előtt. Legyen ez egy pár objektumot tartalmazó tömb, amely termékadatokat tartalmaz. Minden termékhez adjunk meg id-t, nevet, leírást, árat és mennyiséget:

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',
  },
]

A fájl kódjának végén a függvény eredményéből a createSlice által generált reducert vesszük ki és exportáljuk. Szükségünk lesz rá más fájlokban az alkalmazásban:

parts/products/productsSlice.jsexport default productsSlice.reducer