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:

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

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

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

export default productsSlice.reducer

Nyissa meg a hallgatók számára készült alkalmazását. Hozzon létre benne egy studentsSlice.js fájlt, ahogyan azt a leckében leírjuk. Hozzon létre benne a createSlice segítségével egy students szeletet. A szelet kezdeti értéke legyen egy pár objektumot tartalmazó tömb, amely hallgatók adatait tartalmazza.

Minden hallgatóhoz készítsen mezőket: id, keresztnév, vezetéknév, életkor és szakirány.

A studentsSlice.js fájl végén exportálja a kapott reducert, ahogyan az a leckében le van írva.