További slice hozzáadása a Redux-hoz

Az előző órákon sokat dolgoztunk a products slice-on a termékekhez. Egy valós Redux alkalmazásban az állapotban sok slice lehet különböző célokra. Ezért ezen a leckén hozzáadunk az állapothoz egy további slice-ot az eladóknak, akik gyakorlatilag fogják hozzáadni a termékeket az alkalmazásunkban.

Nyissuk meg a termékekkel kapcsolatos alkalmazásunkat és az első dolog, amit teszünk, hogy a parts mappában létrehozunk egy másik mappát sellers, itt fogjuk elhelyezni az összes kódot és komponenseket, amelyek az eladókat érintik.

Most, ahogy a termékek esetében is, hozzuk létre az eladók slice-ját. Kezdetként a sellers mappában hozzunk létre egy sellersSlice.js fájlt és importáljuk bele a createSlice-ot:

parts/sellers/sellersSlice.jsimport { createSlice } from '@reduxjs/toolkit'

Folytatjuk a szokásos lépéseket. Mint kezdeti érték a slice-hoz hozzunk létre négy eladót. Az egyszerűség kedvéért nekik két mezőjük lesz - id és name:

sellers/sellersSlice.jsconst initialState = [
  { id: '0', name: 'Super Power' },
  { id: '1', name: 'Miracle Life' },
  { id: '2', name: 'Dolls&Toys' },
  { id: '3', name: 'Granny' },
]

Alul a createSlice segítségével hozzuk létre a slice-ot sellers, adjuk át neki a kezdeti értéket. Mivel nem fogunk sem eladókat hozzáadni, sem frissíteni az adataikat a továbbiakban, ezért hagyjuk a reducers mezőt egyelőre üresen:

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

A fájl végén ne felejtsük el az exportálást a kapott reducer számára:

sellers/sellersSlice.jsexport default sellersSlice.reducer

Most meg kell nyitnunk a store.js fájlt a app mappában és importálnunk a kapott reducert:

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

Majd hozzárendelni a configureStore-ban mint reducer a sellers számára:

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