Alapfogalmak a Redux-ban

Ebben a leckében röviden áttekintjük az alapvető fogalmakat és kifejezéseket, amelyek ismerete elengedhetetlen a Redux további tanulmányozásához.

Kezdjük a akció (action) fogalmával. Ez egy olyan esemény, amely leírja, mi történt az alkalmazásunkban. Technikailag ez egy sima JavaScript objektum, amely tartalmaz egy type mezőt, ahova beírjuk az akció nevét.

Az akció objektum második fontos mezője a payload. Ez tartalmazza az akció hasznos teher-ét (adattartalmát). A hasznos teher alatt olyan adatokat értünk, amelyek paraméterként kerülnek átadásra az akciónak.

Ebben az objektumban lehetnek más további mezők is, további információkkal.

Példaként hozzunk létre egy akciót és nevezzük el addOrderAction-nak. Legyen ez felelős egy rendelés hozzáadásáért. Tehát a type tulajdonságban jelezzük, hogy a rendelés hozzáadásra került (orderAdded) a rendelések (orders) közé. A payload-ban pedig adjuk meg részletesen, milyen rendelésről van szó, például - festsen falat:

const addOrderAction = {
	type: 'orders/orderAdded',
	payload: 'Paint a wall'
}

Ahhoz, hogy ne kelljen minden alkalommal kézzel írni az akció objektumot, használhatunk úgynevezett action creator-t (akciókészítőt) - egy függvényt, ami létrehozza és visszaadja nekünk az akció objektumot. Nevezzük el addOrder-nak. Paraméterként átadjuk neki a kívánt szöveget a payload tulajdonsághoz:

const addOrder = text => {
	return {
		type: 'orders/orderAdded',
		payload: text
	}
}

A következő fontos fogalom a láncban - a reducer (reducer) - egy olyan függvény, ami átveszi az aktuális állapotot és az akció objektumot. Ez a függvény dönti el, hogyan frissítse az állapotot, és szükség esetén visszaadja a frissített állapotot.

A következő fogalom - a tároló (store) - ez egy olyan objektum, amely a Redux alkalmazás aktuális globális állapotát tárolja. Ennek az objektumnak van egy getState metódusa, amellyel lekérhetjük az állapot aktuális értékét.

A tárolónak van még dispatch metódusa is. Meghívni ezt és átadni neki egy akció objektumot - ez az egyetlen módja annak, hogy megváltoztassuk az állapotot. Ennek eredményeképpen a tároló meghívja a reducer függvényt és elmenti magánál az állapot új értékét.

És az utolsó fogalom, amelyet ebben a leckében megvizsgálunk - az a szelektorok. A szelektorok speciális függvények, amelyek tudják, hogyan nyerjék ki az információt a tárolóban lévő állapotból. Ezek a függvények különösen hasznosnak bizonyulnak, amikor az alkalmazás megnő, és segítenek elkerülni a kódismétlést.

Minden ezen fogalomról és azok gyakorlati alkalmazásáról részletesebben a következő fejezetekből tudunk meg ebben a tankönyvben.