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:

import { 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:

const 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:

const 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:

export default sellersSlice.reducer

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

import sellersReducer from '../parts/sellers/sellersSlice'

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

export default configureStore({
	reducer: {
		products: productsReducer,
		sellers: sellersReducer,
	},
})

Nyissa meg a diákokkal kapcsolatos alkalmazását. Hozzon létre egy másik mappát teachers, itt lesznek a kódfájljai, amelyek a tanárokat érintik. Hozzon létre benne egy fájlt teachersSlice.js. A lecke anyagait felhasználva hozzon létre benne egy teachers slice-ot a createSlice segítségével.

Minden tanári adatobjektum rendelkezzen három tulajdonsággal: id, name (amely a vezetéknevet és a kezdőbetűket tartalmazza, például 'Petya A.V.') és tantárgy (bármilyen, amit kitalál - fizika, matematika, biológia stb.). Készítsen 3 ilyen objektumot tanárokkal mint a slice kezdeti értéke.

Importálja a kapott reducert teachersReducer a store.js fájlba és rendelje hozzá reducerként a teachers számára, ahogyan azt a leckében bemutattuk.