Kezdő útmutató a Redux-hez

A Redux megértése kezdőként meglehetősen zavaró lehet. Redux rengeteg új kifejezést és fogalmat tartalmaz, amelyek gyakran meglehetősen értelmetlenek. Ez az útmutató a Redux megvalósításának nagyon leegyszerűsített példáját mutatja be. Mindegyik lépést és kifejezést úgy fogom meghatározni, hogy az a kezdő számára értelmes legyen.

Ez útmutatóként szolgál a Redux elemek demisztifikálására. Nem a technikailag legpontosabb meghatározásokat tartalmazza. Nem az eddigi legjobb gyakorlatokkal rendelkezik. Van olyan meghatározása, amely elősegíti a megértés kialakulását egy olyan ember számára, aki nem ismeri ezeket a fogalmakat. Van egy egyszerű megvalósítás, hogy ne keverjük össze a felesleges részletekkel.

Az ebben az útmutatóban bemutatott példa egyszerű todo alkalmazás lesz. Az alkalmazás lehetővé teszi a felhasználó számára, hogy aktuális elemeket adjon hozzá vagy távolítson el, és láthassa azokat az oldalon.

Lépésről lépésre végigvezetem a Redux egyes elemeit, kódpéldákkal elmagyarázom, mi is ez az elem, és hogyan kell megvalósítani. Görgessen az aljára, hogy megtekinthesse a teljes kód példát, amely megmutatja, hogyan illeszkedik össze egy komplett React alkalmazásként.

Lépések összefoglalása

  1. Írja be a szűkítő funkciót
  2. Azonnal tárolja a tárat a gyökér összetevőben
  3. Tekerje be az alkatrészeket az alkatrésszel, a boltban pedig támaszként haladva
  4. Írja meg az összetevőt
  5. Határozza meg a műveleteket
  6. Határozza meg a küldést, csatolja azokat oda, ahol a küldések elindulnak (pl. Eseményfigyelők stb.)
  7. Határozza meg a mapStateToProps függvényt
  8. Exportálja a connect függvényt, átadja a mapStateToProps és null értékeket a 2 argumentumnak, és átadja az összetevő nevét a zárójelek második párjában

Lépések

1. Írja be a reduktor függvényét

A reduktor funkció egy olyan funkció, amely megmondja a boltnak, hogyan reagáljon a cselekvésekre. A függvény az új és frissített állapotot adja vissza, amikor egy műveletet elküldenek. Az állapot megváltoztathatatlan (nem változtatható meg), így a reduktor mindig új állapotot ad vissza. A reduktor általában a spread operátort használja az aktuális állapot beillesztésére egy új objektumba / tömbbe és annak hozzáfűzésére. Általános gyakorlat az, hogy használjon kapcsoló / eset állítást és ellenőrizze az átadott művelet típus tulajdonságát. Ezután írja be a kódot, amely minden esetre frissíti az állapotot.

Először a reduktor funkciónkat írjuk meg, mert ezt át kell adnunk, amikor az üzletünket példányosítjuk. Ahhoz azonban, hogy megértsük, mi történik, némi ismeretre van szükség a cselekvésekről és a feladásról. Ezt a továbbiakban ebben az útmutatóban tárgyaljuk.

Mostanra tudjuk, hogy a todo alkalmazásunknak kétféleképpen kell kölcsönhatásba lépnie az áruházzal: új todo elemet kell hozzáadni az államhoz, és eltávolítani egy todo elemet az állapotból. Ezért úgy írjuk meg a függvényünket, hogy 2 akció típusú esetre reagáljon. A művelet értékét felhasználja, vagy eltávolít egy aktuális elemet az állapotból.

A reduktornak 2 paramétert ad át: állapot (ez az egész állapot, amely jelenleg a boltban van, és megadunk neki egy alapértelmezett értéket, ha még nem létezik állapot) és a művelet. Visszaadjuk az állapotot alapértelmezett esetben.

2. Instantálja a tárat a gyökér összetevőben

A bolt az a dolog, amely valójában tartalmazza az állapotot. Kicsit varázslatos, és nem igazán kell ismernie a csínját-bínját. Csak annyit kell tudnia, hogy nem közvetlenül éri el, mint egy normál React állapotban. Reduktorok, műveletek és diszpécser segítségével érheti el és változtathatja meg.

A másik fontos tudnivaló az üzletről, hogy hasznos és fontos módszereket tartalmaz. A fő módszer a diszpécser funkció. Tartalmaz egy getState metódust (az állapot megtekintéséhez) és a feliratkozási metódust (visszahívást futtat minden művelet elküldésével).

Az áruházat általában az alkalmazás gyökerénél példányosítják (pl. App.js). Változóként van tárolva, és a reduktort paraméterként adja meg. Ezután az áruházat átadják a Szolgáltató komponensnek.

A boltobjektumot az imént létrehozott szűkítőben példányosítjuk.

3. Tekerje be az alkatrészeket az alkatrésszel, a boltban pedig támaszként haladjon el

A Szolgáltató egy olyan összetevő, amelyet azért hoztak létre, hogy megkönnyítse a bolt átadását az összes összetevőhöz. A Szolgáltató összetevője körbeveszi az összes összetevőt (például a Szolgáltató gyermekeként rendereli az alkatrészeket). Csak a Szolgáltatónak adhatja át az üzletet, mint kelléket. Ez azt jelenti, hogy nem kell minden alkatrésznek átadni a boltban kellékként, mivel minden alkatrész a Szolgáltatótól kapja meg. Ez azonban nem jelenti azt, hogy az összetevők még hozzáférnek az államhoz. Még mindig használnia kell a mapStateToProps alkalmazást (erről később kitérünk), hogy az állapot hozzáférhető legyen a komponensében.

A Todo komponenst, amelyet készíteni fogunk, csomagoljuk a Szolgáltató komponensünkkel. Az előző lépésben létrehozott boltban haladunk el.

4. Írja meg az összetevőt

Ezután elkezdjük írni a Todo komponenst, amely megjeleníti a todo elemeket, és kölcsönhatásba lép a Redux tárolóval.

Az összetevő egy állapot állapotú összetevő, amely egy állapot elemet tartalmaz annak nyomon követésére, hogy a felhasználó mit írt be a bemenetbe. Van egy handChange nevű függvényünk. Ez a funkció minden alkalommal frissíti az állapotot, amikor a felhasználó bármit beír a bemenetbe. Eddig ennyit fogunk írni. A logika megírása előtt többet kell megértenünk Reduxról. A logika új állapotokat ad hozzá az állapothoz, és lekéri az aktuálisakat az állapotból, amelyeket az oldalon megjelenít.

5. Határozza meg a műveleteket

A művelet egy egyszerű objektum, amely a „type” nevű tulajdonságot tartalmazza. Ez az objektum átkerül a diszpécser függvénybe. Arra szolgál, hogy megmondja a boltnak, hogy milyen esemény történt (a műveletek típusa tulajdonság olvasásával). Azt is megmondja, hogy milyen választ kell frissítenie az állapotra válaszként (a reduktor funkció segítségével). A művelet egyéb tulajdonságokat is tartalmazhat a reduktorba továbbítani kívánt egyéb adatokhoz. Az adatokat csak itt lehet átadni, így a szükséges adatokat itt kell átadni.

A cselekvés készítőit felhasználjuk cselekedeteink meghatározásához. Az akciókészítők egy olyan függvény, amely visszaadja az akcióobjektumot. Célja az akció hordozhatóbbá és tesztelhetőbbé tétele. Ez nem változtatja meg annak viselkedését, hogy bármi működik. Ez egy másik módszer az akció megírásához és átadásához. Ez lehetővé teszi a paraméterek átadását is, ha adatokat akarunk küldeni azzal a művelettel, amelyet mi fogunk végrehajtani. Tehát itt cselekvési alkotókat kell használnunk.

Ha emlékszel, reduktorunk 2 művelettípusra válaszolt - „ADD_TODO” és „REMOVE_TODO”. Ezeket a cselekvéseket alkotóinkkal fogjuk meghatározni. Az add_todo műveletünkben az „ADD_TODO” -t adja vissza, mint típust, és azt a tárgyat, amelyet hozzá kívánunk adni az áruházhoz, mint értéket (szükségünk van az áruházra, hogy hozzáadjuk ezt az aktuális elemet az állapothoz, hogy ide kerüljön). Az remove_todo-ban a „REMOVE_TODO” -t adjuk vissza, mint típust, és az áruházban található todo elem indexét, mint értéket. Erre szükségünk lesz, hogy töröljük a feladatok listájáról.

Remélhetőleg, ha visszatér a reduktor funkció definíciónkra, akkor ennek már van értelme. Az action.type beolvasásával a szűkítő tudja, hogy hozzá kell-e adni egy állapotot az állapothoz, vagy el kell-e távolítania belőle. Az add_todo-ban átadott todo elem van. A spread operátor segítségével hozzáfűzi az aktuális állapotot. Az remove_todo alkalmazásban a spread operátorral létrehoz egy új tömböt, amely kétszer szeleteli az aktuális állapotot, egyszer az összes elemmel az elõzõ elõtt, a másodikkal pedig az eltávolítandó elemekkel, így létrehozva az új állapotobjektumunkat a a tétel eltávolítva.

Ez azonban még mindig nem teljes kép. Még nem vizsgáltuk, hogy a reduktort hogyan hívják meg és adják át a helyes cselekvés során. Ehhez tovább kell lépnünk, hogy meghatározzuk a diszpécser funkciót.

6. Határozza meg a küldést, csatolja azokat oda, ahol a küldések kiváltódnak (pl. Eseményfigyelők stb.)

A diszpécser funkció a tároló egyik módszere, amelyet az állapot változásának kiváltására használnak. Bármely eseménynek vagy bárminek, amelynek frissítenie kell az állapotot, ehhez meg kell hívnia a diszpécsermódszert. Ez az egyetlen módja az állapot változásának / frissítésének kiváltására. A diszpécser meghívásra kerül, és az akcióobjektum (vagy az akciókészítő, ha ezt használták) átkerül. Miután a diszpécser elindult, a bolt meghívja a szűkítő funkciót, és végrehajtja a diszpécser által biztosított műveletet, amely frissíti az állapotot, amint azt korábban láttuk.

Az alábbiakban meghatározzuk a Components render módszerünk alsó felét. Elkészítjük a gombjainkat, amelyek tartalmazzák az eseménykezelőket. Ezeken belül meghatározzuk a diszpécser funkcióinkat.

Az első gomb egy egyszerű hozzáadás gomb. Ez a gomb elküldi az add_todo műveletet a boltba. Értékként adja át az aktuális felhasználói adatbevitelt (ez az a tényelem, amelyet a reduktor az új állapothoz fűz). Megjegyezzük, hogy a diszpécsert hívjuk this.props.dispatch. Kicsit kívül esik ennek az útmutatónak a célja, hogy megértsük, hogyan és miért kerül ez átadásra az alkatrész támogatásaként. Tehát csak tudd, hogy igen, és így is nevezhetjük.

A második eseménykezelőt onClick-ként írják a renderelt todo elemünkre. Az oldal bármely tetszőleges elemére kattintva eseménykezelőt indít el. Az eseménykezelő a todók listáján keres, és megtalálja annak listáját. Ezután elküldi az remove_todo műveletet, és átadja az indexnek.

A Redux áruház állapotának frissítésének ciklusa most már teljesen meg van határozva. Tudjuk, hogy bármikor meg akarjuk változtatni az állapotot, meg kell hívnunk a diszpécsermódszert, át kell adnunk a megfelelő műveletet, és biztosítani kell, hogy reduktorunk kezelje ezeket a műveleteket, és visszaadja az új állapotot az akción keresztül átadott értékek felhasználásával.

Az egyetlen kirakós darab hiányzik, hogy hogyan szerezzük meg az állapotot a Redux áruházból. Valószínűleg észrevette, hogy feltérképeztem egy listát, amelyet this.props.todosaz előző példában hívtunk meg. Lehet, hogy kíváncsi vagy, honnan jött ez. Emlékezhet arra is, hogy az útmutató elején említettem, hogy az áruháznak a Szolgáltató komponensbe történő átadása nem elegendő ahhoz, hogy hozzáférjen az üzlet állapotához. Mindezzel foglalkozunk a következő 2 lépésben, amikor meghatározzuk a mapStateToProps függvényünket, és átadjuk ezt a connect függvénynek.

7. Határozza meg a mapStateToProps függvényt

Ha azt akarja, hogy az összetevő hozzáférjen az állapothoz, akkor pontosan meg kell határoznia, hogy az állapot melyik részéhez fog hozzáférni az összetevő. A komponens e nélkül nem férhet hozzá az államokhoz.

A mapStateToProps egy olyan függvény, amely egyszerűen visszaad egy objektumot, amely meghatározza, hogy milyen állapotot kell átadni az összetevőnek azáltal, hogy az állapotban lévő értékeket hozzárendeli az ebben az objektumban megadott tulajdonságokhoz. Lényegében az a tárgy, amelyet a mapStateToProps alkalmazásban visszaad, az, amelyet a kellékei az összetevőjében tartalmaznak. A mapStateToProps függvény első argumentumként átkerül a connect metódusba.

A mapStateToProps a teljes állapotot paraméterként veszi fel, és csak azt veszi át, amire szüksége van. Itt, bár államunk csak a todók listáját tartalmazza. Szükségünk van erre a listára a ToDo komponensünkben, a teljes állapotot a todos nevű tulajdonságként adjuk vissza.

Amint most láthatja, a teljes kelléklistánkhoz hozzáférünk kellékeinkben this.props.todos. Így tudtuk az előző példában bemutatni az összes feladatunkat, feltérképezve azt.

Végül át kell adnunk ezt a függvényt a connect módszerünkbe, hogy mindent összekapcsoljunk.

8. Exportálja a connect függvényt, adja meg a mapStateToProps és null értékeket a 2 argumentumként, és adja át az összetevő nevét a második zárójelpárban

A Connect egy olyan módszer, amely bekapcsolja a mapStateToProps és a mapDispatchToProps (lásd alább) függvényeket az Ön összetevőjébe, hogy az áruház el tudja olvasni ezeket a függvényeket, és biztosítsa, hogy az ott megadottakat átadják az alkatrésznek kellékként. Ez a módszer egy speciális szintaxissal rendelkezik, amely így néz ki:

connect(mapStateToProps, MapDispatchToProps)(YourComponent)

Átadja a 2 map...ToPropsfüggvényt a connect-nek, majd az összetevő nevét a második zárójelben. Egy tipikus minta az, hogy a connect metódust exportálja az összetevő helyett, amikor a fájl végén exportálja az összetevőt. Például:

export default connect(mapStateToProps, MapDispatchToProps)(YourComponent)

Ez akkor ugyanúgy működik, mint a normál exportálás, kivéve, hogy az állapotot és a küldeményeket kellékként továbbítják. A mapStateToProps és a mapDispatchToProps valójában opcionális paraméterek a csatlakozáshoz. Ha nem akarja átadni egyiket vagy egyiket sem, akkor helyette tegye a nullát.

Kíváncsi lehet, honnan származik ez a mapDispatchToProps funkció, és miért nem említettük itt korábban sehol. Nos, mivel ez az útmutató a Redux áruház legegyszerűbb példája, és a mapDispatchToProps nem szigorúan kötelező, ezért nem vettem fel a példánkba. Ha nem adja át a mapDispatchToProps és a null értéket, akkor továbbra is hozzáférhet a komponens diszpécser funkciójához, ahogyan azt korábban tettük this.props.dispatch.

Tehát a példaalkalmazásunk befejezéséhez csak annyit kell tennünk, hogy exportáljuk az összetevõinket, becsomagolva a connect függvénnyel és átadva az imént definiált mapStateToProps-ot.

És ez az! Ez egy Redux áruház teljes megvalósítása. Az alábbiakban találjuk meg a megvalósított példákat.

Teljes kommentált kód példa

App.js Todo.js

Remélem, hogy ez az útmutató leegyszerűsítheti a Redux néhány furcsa és néha zavaró részletét. Ez nem a Redux teljes útmutatója, mivel mindenképpen több elemet és mintát kell megérteni. De ha megérted ezt az útmutatót, akkor jó úton jársz, hogy együtt tudj működni és telepíteni a Redux-ot az alkalmazásaidba.