Bevezetés a Redux-Logic-ba

Ez a cikk a Redux-Logic magas szintű áttekintését mutatja be. Megnézzük, mi ez, miért van rá szükség, miben különbözik a többi Redux köztes programtól és miért gondolom, hogy ez a legjobb választás. Ezután látni fogunk egy egyszerű Időjárás alkalmazást, hogy bemutassuk, miként valósítják meg az alapkoncepciókat a gyakorlatban.

Ez a cikk feltételezi, hogy jól ismeri a React és a Redux programokat.

Gyors frissítés a Redux-on

A Redux egy állapot tároló a JavaScript alkalmazásokhoz, és általában a React alkalmazással használják. Központi helyet biztosít az alkalmazásban használt adatok tárolásához. A Redux keretet biztosít a kiszámítható állapotmutációk elkészítéséhez is . A Redux használata megkönnyíti az adatközpontú és dinamikus alkalmazások írását, megértését, hibakeresését és méretezését.

A Redux-ben az összetevők művelet-alkotókat hívnak, amelyek műveleteket küldenek . A műveletek (általában!) Kicsi sima objektumok, amelyek szándékot vagy utasítást fejeznek ki. A műveletek tartalmazhatnak „hasznos terhelést” (azaz adatokat is).

Az alkalmazás állapotát reduktorok kezelik . Bonyolultabban hangzanak, mint ők! A műveleteket egy gyökérszűkítő kezeli, amely aztán a műveletet és a hasznos terhet átadja egy adott reduktornak. Ez szűkítő fog venni egy példányt az alkalmazás állapotát, változékonysága a másolat (a cselekvés és annak hasznos teher), majd frissítse az állam az alkalmazás Store .

Miért van szükség a Redux Logic-ra?

Alapértelmezés szerint a Redux összes művelete szinkronban kerül küldésre. Ez kihívást jelent minden olyan alkalmazás számára, amelynek támogatnia kell az aszinkron viselkedést, például az adatok lehívását egy API-ból ... nagyjából minden alkalmazás!

Az aszinkron viselkedésének a Redux használatával történő kezeléséhez szükségünk van valamilyen köztes programra, amely némi feldolgozást végez a művelet elküldése és a művelet elérése között a reduktorok között. Számos népszerű könyvtár létezik ennek a funkciónak a biztosításához.

A különféle lehetőségek feltárása után egy ideje különböző projektekben használom a Redux-Logic programot, és nagyszerűnek találtam!

Redux-Logic életciklus

A Redux-Logic olyan köztes szoftvert biztosít, amely bizonyos műveleteket végez, amikor egy művelet elküldődik egy alkatrésztől, és amikor a művelet eléri a reduktort.

A „Logic” létrehozásához a redux-logic könyvtárat használjuk. Ezek alapvetően olyan funkciók, amelyek elfogják az adott sima objektum műveleteket, aszinkron feldolgozást hajtanak végre, majd újabb sima objektum műveletet küldenek . A logikai funkciók valóban deklaratívak és rugalmasak, amint látni fogjuk!

Fontos dolog, amit itt el kell távolítani, hogy minden olyan művelet, amellyel a Redux-Logic működik, egyszerű objektum . A felhasználói felület összetevő által küldött művelet és a Logic által küldött művelet mindig sima objektum lesz (szemben például egy funkcióval). Az alábbiakban ezt újra megvizsgáljuk, amikor összehasonlítjuk a különböző köztes szoftver opciókat.

A burkolat alatt a Redux-Logic „megfigyelhető” elemeket és reaktív programozást használ. Erről itt olvashat bővebben.

Adatáramlás

Az alábbiakban összehasonlításképpen egy diagramot készítettem, amely bemutatja a szinkron redux folyamat életciklusának fontos pontjait. Nincs köztes szoftver (mert egyikre sincs szükség!).

Most itt van egy diagram, amely bemutatja a projekt fontos részeit, amelyek a redux-logic könyvtárat használják aszinkron műveletek kezelésére. Erre hasznos lesz később hivatkozni az alábbi példa mellett.

Láthatja, hogy a köztes szoftver hogyan működik között, amikor egy műveletet elküldenek, és amikor egy reduktor kezeli.

Főbb különbségek a többi megoldástól

A Redux-Thunk a Redux köztes programok népszerű választása, amely lehetővé teszi az aszinkron viselkedés támogatását is. Az aszinkron viselkedés kezeléséhez a Redux-Thunk használatával a műveletek létrehozóinak vissza kell adniuk a funkciókat , nem pedig a sima objektumokat a Redux-Logic segítségével. Úgy gondolom, hogy a sima objektumok Redux-Logic segítségével történő elküldése sokkal könnyebben írja be a kódot, és sokkal könnyebben érthető.

Továbbá úgy gondolom, hogy az aszinkron viselkedés kezelésére szolgáló „sima objektum” megközelítés természetesebben illeszkedik a többi (szinkron) Redux architektúra mellé, ami miatt ez a köztes szoftver szervesebben illeszkedik a Redux-hoz.

Egy másik népszerű Redux köztes szoftver a Redux-Saga . Nagyon meredeknek találtam a fejemet a sagák körül (egy viszonylag új ES6 funkció), amikor ezt a lehetőséget néztem. Ez tovább súlyosbodna, ha ezt a könyvtárat be szeretné vezetni egy alkalmazásba, amelyet egy több emberből álló csapat kezel. Ezenkívül úgy gondolom, hogy ha nem megfelelően kezelik őket, akkor a sagák bonyolult megjelenésű kódot hozhatnak létre a Redux-logic segítségével létrehozott logikához képest. Ez hatással lehet a fejlesztés sebességére és a kód karbantartására.

A példa áttekintése

Az alábbiakban bemutatjuk az egyszerű React alkalmazás egyszerű kivonatait, amelyek lekérhetik a város aktuális időjárási viszonyait és bemutathatják a felhasználónak. A példa a Redux-Logic segítségével támogatja az aszinkron viselkedést az adatok lekéréséhez egy ingyenes OpenWeatherMap API segítségével.

Összehasonlításképpen felvettem egy szinkron Redux folyamatot, amely megjeleníti a felhasználó által benyújtott kérések számát.

Itt van a forráskód.

Fejlesztői környezet kialakítása

Ezek a parancsok futottak az alkalmazás létrehozásának megkezdéséhez:

npx create-react-app appnpm install --save reduxnpm install --save react-reduxnpm install --save redux-logicnpm install --save axios

És az alkalmazás megtekintéséhez:

npm start

Örülök, hogy a localhost: 3000- nél láthattam az alapértelmezett Create React App kezdőlapot , majd elkezdtem írni néhány kódot!

Az alábbiakban olyan kódrészletek találhatók, amelyek bemutatják a Redux-Logic projektbe történő integrálásának fontos pontjait.

Középprogram hozzáadása a Redux üzletünkhöz

Az appStore.js fájlban , ha nem használunk semmilyen köztes szoftvert, akkor a gyökérszűkítőt általában csak a createStore módszerhez adjuk. Itt kapcsoljuk össze a Redux-Logic köztes programunkat az alkalmazás többi részével.

Meghatározzuk, hogy az axiókat szeretnénk kliensként használni HTTP kérések készítéséhez.

Ezután a redux-logic metódusát használjuk a köztes szoftver létrehozásához, végül paraméterként hozzáadjuk a createStore metódushoz. Ez azt jelenti, hogy a Redux kódunk hozzáférni fog a köztes programunkhoz. Nagy!

Aszinkron műveletek küldése

A Redux-Logic használatával az aszinkron viselkedést kiváltó műveletek ugyanúgy kerülnek elküldésre, mint a szinkron állapotfrissítéseket kiváltó műveletek. Nincs semmi más!

A teljesség kedvéért alább láthatja, hogy amikor a felhasználó rákattint egy gombra, akkor egy cselekvés-alkotót hívunk, amelyet az alkatrészünknek átadtunk kellékként.

Aszinkron műveletek elfogása

Itt láthatjuk először a redux-logic middleware megjelenését. A redux-logic könyvtár segítségével létrehozunk egy „Logikát”, amely elfogja a megadott műveleteket.

Logikai tulajdonságainkban elmondjuk a redux-logic-nak, hogy melyik műveletet akarjuk elfogni. Meghatározzuk, hogy azt akarjuk, hogy a redux-logic csak az összetevő által küldött ilyen típusú utolsó műveletből szolgáltasson adatokat. Példánkban ez a kijelentő magatartás akkor hasznos, ha az emberek folyamatosan rákattintanak egy gombra, mivel megkapják az értéket a legutóbbi feladattól, nem feltétlenül az utolsó ígéretet a visszatérésre!

Ezután meghatározzuk, hogy amikor az aszinkron folyamat visszatér, azonnal elküldjük a két művelet egyikét. Ha az ígéret sikeresen visszaérkezett, akkor egy GET_WEATHER_FOR_CITY_SUCCESSFUL műveletet adunk vissza . Ezt akarjuk!

Alternatív megoldásként, ha a visszaküldött ígéretet elutasították, akkor a GET_WEATHER_FOR_CITY_FAILURE-t küldjük .

Itt ragyog igazán a redux-logika . Világos, hogy mi a logikai kód célja, és a kibocsátott egyszerű objektumok, amelyeket könnyen lehet olvasni és értelmezni! Ezt nagyon könnyen olvashatom, megértem és hibakeresésnek tartom.

Alul egyértelművé tesszük, mit akarunk aszinkron folyamatunknak. Vissza akarjuk adni az ígéret értékét. Figyelje meg, hogyan adjuk át a műveletünkkel járó hasznos terhet az URL-be.

Aszinkron műveletek feldolgozása

Az weatherDataHandling.js szűkítőből láthatja, hogy a Logic-ból küldött műveleteket ezután egyszerű objektum-műveletekként kezeljük. A reduktorok ugyanúgy mutálják az állapotot, mint a szinkron műveleteknél . Tehát az alábbi képernyőkép az, amit elvárhat a Redux-szel való korábbi munkától. Szuper!

Összegzés

A Redux egy népszerű kiszámítható állapot-tároló a JavaScript-alkalmazásokhoz. Alapértelmezés szerint az összes Redux művelet csak a szinkron viselkedést támogatja, és az aszinkron viselkedéshez valamilyen köztes szoftverre lesz szüksége.

A Redux-Logic tiszta és hatékony köztes szoftvert biztosít, amely lehetővé teszi aszinkron műveletek használatát a Redux alkalmazásban. Hozzáadja a köztes szoftvert a Redux Store-hoz, hogy lehetővé tegye az alkalmazás számára a Redux-Logic használatát. Ön a Redux-logika könyvtár létrehozása Logic , amely keresztezi az egyes tevékenységek és elküldi további intézkedéseket követően néhány aszinkron feldolgozás (például az adatok lekérése egy API) befejeződik.

Az összes érintett művelet egyszerű objektum művelet. Úgy gondolom, hogy ez megkönnyíti az írást és könnyebben érthető más megoldásokhoz képest. Ezenkívül a redux-logika szervesebben illeszkedik a Redux architektúra többi részéhez.

Köszönöm, hogy elolvastad, örömmel fogadok minden észrevételt vagy kérdést!