Speciális ReactJS: A React + Redux + Sagas bevált gyakorlatai

kávé gondolkodáshoz

Elsőként először egy gyors bevezetés arról, hogy mi a React. Ez egy JavaScript könyvtár, amelyet a felhasználói felületek felépítéséhez használnak. Megváltoztatta a front-end fejlesztési környezetet a megjelenése óta. Tehát, ha front-end web fejlesztőként törekszik, olyan könyvtárak tanulása, mint a React vagy a Vue.js, szinte nélkülözhetetlen a mai iparban. Ez egy nagyszerű bemutató, ha csak elkezdi megtanulni a Reakciót. https://reactjs.org/tutorial/tutorial.html.

Emlékszem, amikor elkezdtem tanulni a Reakt. Mindig olyan aggódó érzésem volt, hogy soha nem tudok megtanulni mindent, amire szükségem volt, a fejem fölött egyre változó JavaScript-nyelv, és ha valaha is sikerül valami rendben, azt kérdezném magamtól, hogy ez valóban a legjobb út megcsinálni? Szó szerint több száz online oktatóprogram, a Youtube keresése és a befejezetlen (és valószínűleg mosatlan) kávéscsésze után végül határozottan megértettem, amit a React megpróbál behozni a JavaScript táblába.

Mindig is küzdöttem azon bemutató megtalálása mellett, amely a React összes fejlett koncepcióját egyetlen kompakt bemutatóba köti.

Azt is emlékszem, hogy nehezen értem ezeket a fogalmakat, amikor egy nagy forráskódban használták őket. Ezt a hiányt próbálta kitölteni ez a cikk. A fejlett eszközöket és fogalmakat beágyaztuk az egyszerű alkalmazásba, ez kizárólag oktató célokat szolgál, és nem szabad ezeket a fogalmakat használni, ha az alkalmazásnak nincs rá szüksége.

Elég a chit-chat-hez. Beszéljünk a kódhoz. Töltse le a kész kódot ebből a repo-ból, és kövesse a README-t, hogy láthassa és érezze, mit építünk itt. https://github.com/jelorivera08/react-starter-pack.

Az alkalmazás kezdőlapja

Fent láthatja a megjelenített számlálási állapotot és négy gombot, amelyek aktiválják a megfelelő műveleteket. Tevékenységeik önmagukban magyarázhatók.

szelektor

Keresse meg a selectors.js fájlt a Counter tárolóban, az első fejlett koncepció, amellyel itt foglalkozunk, a createSelector. A kód megnézésével először a const count változó az state.get ('count') használatával lehívja a redux állapotfában belüli számlálási állapotot.

Ezután az említett módszerrel létrehozunk egy választót. Ez segít formázni az állapotot / az adatot, amelyet az redux állapotfától kapunk, és ezzel sok időt spórolunk az új funkciók kódolására, amelyek kezelik az állam szerkezetátalakítását vagy a célállapot formázását minden alkalommal, amikor szükségünk van valami előtérbe helyezésére. végen. Ebben a példában nem változtattam meg az általam kapott állapotot. Most visszatértem a sima államot demonstrációs célokra.

Ezután a kapott funkciót a mapStateToProps-en belül használják, és a mapStateToProps-ban természetesen a következő lépés, amelyet konfigurálni kell a mapDispatchToProps.

hozzon létre műveleteket

A reduktorműveletek küldésekor minden esetben be kell jelentenünk a típusát és a megfelelő kapcsolót egy reduktorhoz, amelyet később beveszünk az alkalmazás állapotának megváltoztatása érdekében. A reduxsauce createActions csomagjának köszönhetően két madár megüt egy kövön. A reduktor redukciós szósszal is formáznia kell, hogy teljes mértékben kihasználhassuk ezt a csomagot.

csökkentő

Fent az alkalmazás reduktorja. A kiindulási állapotot a fromJS API zárja be a megváltoztathatatlanságtól, és mivel a csomag neve érvényes, megvédi a kezdeti állapotot a mutációtól. A reagálás nagyon szigorú ezzel a koncepcióval, ezért ezt mindig tartsa szem előtt. A createReducer API a reduxsauce-ból két érvvel rendelkezik.

Először a kezdeti állapot. Másodszor, az objektum, amelynek kulcsa van a művelettípusokhoz és az értékekhez, mint olyan függvény, amely a reduktor akkor aktiválódik, amikor egy típus megegyezik a diszpécser hívással. Az egyesítés tehát ennek megfelelően megváltoztatja a redux állapotfát. Nincs olyan valós alkalmazás, amely nem tudja, hogyan kell kezelni az aszinkron API-hívásokat? Jobb.

redux saga

Itt van a programunk saga saga része. Minden ugyanaz, kivéve azt a módot, ahogyan nevezzük tetteinket. Használjuk a korábban létrehozott típusú műveletet, és felhasználjuk őket figyelő sagankban annak érdekében, hogy olyan aszinkron hívásokat küldjünk, amelyek később befolyásolják a redux állapotfát.

A késés azért van, hogy gátolja a hálózati késleltetést az alkalmazás sokkal jobb aszinkron érzése érdekében. Ó, és végül, ügyeljünk arra, hogy ne felejtsük el a teljesítményt.

kód felosztás

A kódosztás nagyszerű módja a webes alkalmazások teljesítményének javítására. A JavaScript-kód veszi a legjobban a felhasználói adatokat. Ne felejtse el, hogy a kódrészeléssel együtt lehetővé teszi a végfelhasználó számára, hogy a kódnak csak azt a részét töltse le, amelyre szüksége van az adatfogyasztás hatékonyságához.

Következtetésképpen,

Nagyon sok csomag és eszköz van, amelyek segítenek nekünk, a szoftvermérnököknek tisztább és sokkal hatékonyabb kód létrehozásában. költségekkel, a mögöttes rendszer megértésének költségével jár, és ez a Reactben gondolkodik.

A React tanulása megköveteli, hogy a kódolási paradigmát sokkal különbözõbbre változtassa, mint az elõzõ kódolás korábbi gondolkodásmódja szerint. Az eszközök és csomagok, amelyeket ebben a cikkben tárgyaltam, összefoglalják azokat az alapelveket, amelyekre szükség van a React gyönyörű és hatékony kódolásához, és ez teszi a kivételes fejlesztőt.

Mindig a kis dolgok.

Remélem, hogy ezzel hozzájárultam ahhoz, hogy jobban megértse a Reaktust ezzel a kis cikkel. Egészségére!