Hogyan lehet integrálni a Redux alkalmazását a React Native és az Expo alkalmazással

A Redux a React Native ökoszisztéma fontos része. Ha a világ a JavaScript körül forog, akkor valószínűleg hallott a Redux-ról. Mielőtt elolvassa az oktatóanyag többi részét, és továbblépne, próbáljon meg emlékezni arra, hogy csak azért ismeri meg a Redux-ot, mert az megkönnyíti és nem nehezíti meg a dolgát. Most hadd megtudja, miért van szüksége Redux-ra az alkalmazásában.

Szüksége van Redux-re

A React vagy React Native alkalmazás létrehozása a való világban összetetté válhat, ha nincs megfelelő módszer az adatok kezelésére. Ha valamelyik pillanatban nem kezelik az adatokat, akkor a dolgok kiszabadulnak. Ha ismeri a React vagy a React Native programot, akkor tudja, hogy az adatok alapértelmezett kezelési módja az, hogy azokat összetevő állapotban tartja, és gyermekeknek továbbítja a kellékeknek.

Az állapot és a kellékek az egyetlen két módja az összetevők adatainak ellenőrzésére. A kellékek a tulajdonságok rövidítése . A React világban követendő egyszerű szabály, hogy nem kell mutálnunk vagy megváltoztatnunk a kellékek értékét. A React-ben az adatfolyam egyirányú vagy egyirányú. Vagyis az adatokat mindig át lehet adni a szülőtől a gyermek komponenshez. Vessen egy pillantást alább erre az egyszerű példára:

A fenti példában két összetevőt (szülő és gyermek) külön fájlokban hozunk létre. A Szülő komponens egy nézetből áll, ahol a Gyermek összetevő megjelenik. A gyermek komponensben a nézet egy szöveges üzenetet jelenít meg, amely a kellékektől érkezik. A beérkező üzenet adatokként érhető el a szülőösszetevő állapotában.

Ily módon a gyermekkomponens újrafelhasználható más szülői komponensekkel, így minden szülőkomponensnek saját adatai lehetnek. Ne feledje, hogy az egyik értékét nem módosítjuk this.props.

Az állam azért van, hogy mutálja az adatokat. Ez az egyetlen oka annak, hogy az állapot minden egyes komponensen belül létezik. Valahányszor meg akarjuk változtatni az állapotot, this.setState()egy komponensen belül használjuk a metódust. Ez a módszer újra megjeleníti az összetevőt és annak összes gyermekkomponensét, hogy tükrözze a változásokat. Ez mind a React, mind a React Native esetében hasonlóan működik, de a belső részek különbözőek.

Mivel a React Native alkalmazáson belül olyan hatékonyan tudjuk kezelni az állapotot és a kellékeket, miért szükséges a Redux? Nos, a fenti példa a minimumot jelenti, és nem valós idejű forgatókönyvet. Képzeljen el egy olyan alkalmazást, mint az Instagram vagy a Twitter. Különböző képernyője van, és mindegyik képernyő függhet egy-két alkotóelemtől, például a szülőtől és a példánkban szereplő újrafelhasználható gyermek-összetevőktől. Nehéz lenne nyomon követni az egyes alkatrészek állapotát.

A Redux az adatok kezelésének egyik legelterjedtebb módja. Lehetővé teszi az állapot megosztását globális attribútumként, amelyet egy teljes React Native alkalmazás használhat és fogadhat el kellékek formájában. Ez úgynevezett üzlet létrehozása Redux-ban. Redux leegyszerűsíti az állapotot azáltal, hogy egy helyre mozgatja.

Redux egy mögöttes reakciómechanizmust használ, amelyet kontextusnak hívnak. Nem fogjuk kitérni arra, hogy mi a helyzet, mivel ez nem tartozik a cikk hatálya alá. Csak azt akartam, hogy tudd, hogy semmi varázslat nem történik a színfalak mögött.

Csak emlékezzen a következő kifejezésekre, mivel az alábbi oktatóanyagban látni fogjuk őket működés közben:

  • Műveletek
  • Reduktorok
  • Bolt

A Redux elsajátításának kulcsa a gyakorlat. Most nem akarok túl sok információt megosztani és elárasztani a dolgokat. Kezdjük tehát azzal, hogy létrehozunk egy bemutató alkalmazást a Redux elsajátításához.

Pomodoro alkalmazás kiépítése

Az Expo-CLI használatának megkezdése?

Az alkalmazás felépítéséhez az Expo csapat által bevezetett legújabb, expo-cli nevű eszközt fogom használni. Telepítse globális függőségként, majd inicializálja egy új React Native projektet a használatával.

Annak ellenőrzéséhez, hogy minden megfelelően működik-e ebben a kezdeti állapotban, futtassa a következő parancsot.

A rendszer a következő felületet kéri. Szánjon egy kis időt arra, hogy átélje. Ha korábban épített alkalmazásokat az Expo XDE vagy a Create-React-Native-App használatával, akkor látni fogja, hogy nem sok minden változott, leszámítva azt, hogy most az Expo-CLI használja a Chrome böngészőt.

Válasszon egy szimulátort vagy eszközt, amely képes futtatni az Expo Client alkalmazást a fenti képen látható módon. Ha megkapja az alábbi képernyőt, ez azt jelenti, hogy a React Native projektünket minden nehézség nélkül elindítottuk.

Ezzel hozza létre a következő fájlokat és mappákat a componentskönyvtárban. Később megbeszélem, miért követjük ezt a könyvtárstruktúrát. Egyelőre a kezdeti beállításunk befejeződött, és elkezdhetjük az alkalmazásunk építését.

Időzítő komponens ⏱

Először létrehozunk egy néma időzítő komponenst, és összekapcsoljuk App.js. Adja hozzá a következő kódot a következőhöz Timer/index.js:

Ezután módosítsa a App.jsfájlt:

Most egy statikus időzítő komponenst készítünk, hogy lássuk, hogyan illenek a dolgok. Először a StatusBar. Ezután két Textelemet definiálunk a react-nativekönyvtárból, hogy meghatározzuk, hol jelenik meg a tényleges időzítő, és hol jelennek meg az időzítő elindításának és leállításának gombjai. Egyelőre mindkettő szövegmező.

Gombok hozzáadása?

Ebben a részben a megjelenő részt Start and Stop Buttons!a tényleges gombokkal cseréljük le . Használni fogjuk TouchableOpactiyezt a munkát. Egy TouchableOpacityösszetevő burkolóként működik, hogy a nézetek megfelelően reagáljanak az érintésekre. A becsomagolt nézet (vagy esetünkben a gomb) átlátszatlansága csökken, ha a felhasználó hozzáér.

Újrahasználható komponenst hozunk létre, mivel két gombra van szükségünk: Start és Stop.

Ez hontalan összetevő, így nincs osztálya - csak arra van szükségünk, hogy a Button-t képviselje az alkalmazás felhasználói felületén. FontAwesome ikonokat is importálunk innen @expo/vector-icons, amely egy reakció-native-vector-ikonok egy villája, és közvetlenül az expo SDK-val érkezik. Nem kell külön függőségként telepíteni. Az ikon megjelenítéséhez meg kell határoznunk azt size.

Végül a fenti hontalan komponensben meghatározzuk propTypes. Megbeszélem, hogyan és miért kell használni a PropTypes-eket egy React Native alkalmazásban egy másik cikkben.

Egy mobilalkalmazásban az eseményeket érintés váltja ki. Ezeknek az eseményeknek a kezelésére használni fogjuk onPress. Csak két eseményünk lesz itt, a Start és a Stop. Alkalmazásunk mindkét gombja használni fogja azokat, onPressOutamelyek eltérnek onPress. A onPressOuthívást akkor hívják meg, amikor a felhasználó elengedi az érintést (amikor a felhasználó abbahagyja a gomb megnyomását). Korábban hívták, onPressés pontosabb egy olyan helyzetben, mint a miénk, amikor el kell indítanunk vagy le kell állítanunk az időzítőt a gomb megnyomásával, amint a felhasználó végzett.

Most erre az Buttonösszetevőre lesz szükségünk az Időzítő komponensünkben.

Redux integrálása?

Eddig Timer alkalmazásunk nem tesz mást, mint hogy megjeleníti a minimális felhasználói felületet. Ahhoz, hogy működőképes legyen, hozzáadunk néhány szükséges Redux-függőséget.

Most kezdjük el integrálni a Redux alkalmazást.

Műveletek?

A Redux-ban az egész alkalmazás állapotát egy JavaScript objektum képviseli. Gondoljon erre az objektumra, csak olvashatóra, mivel ezen az állapoton (amelyet fa formájában ábrázolunk) közvetlenül nem tudunk változtatni. Meg kell actionstennünk.

A cselekvések olyanok, mint a Redux-i események. Kiválthatók egérkattintások, gombnyomások, időzítők vagy hálózati kérések formájában. Minden említett esemény jellege változtatható. A művelet egy JavaScript objektum. Egy művelet definiálásához egy követelmény szükséges: minden műveletnek megvan a maga típusa. Ezeket a típusokat egy fájl nevű fájlban definiáljuk types.js:

Alkalmazásunknak eddig csak három műveletre van szüksége. Bármely művelet típusa string karakterlánc, és konstansként van meghatározva.

A fájlban actions.jsezekre a típusokra lesz szükségünk a cselekvés alkotóinak meghatározására. Az Action Creators olyan funkciók, amelyek műveleteket hoznak létre.

Reduktorok?

Az akció vevője reduktorként ismert. Amikor egy művelet elindul, az alkalmazás állapota megváltozik. Az alkalmazás állapotát a reduktorok kezelik.

A reduktor egy tiszta függvény, amely a kezdeti vagy az előző állapot alapján kiszámítja a következő állapotot. Mindig ugyanazt a kimenetet produkálja, ha az állapot változatlan. Két bemenetre van szükség, és az állapotnak és a műveletnek vissza kell adnia az alapértelmezett állapotot.

A kezdeti állapotban, definiáljuk három attribútum: isPlaying, elapsedTimeés timerDuration. Az időzítő alapértelmezett értéke jelenleg 6 (másodperc) tesztelés céljából, de a tényleges érték, amelyet később módosítani fogunk 25(vagy 1500 másodperc).

Ezután három segítő funkció van:

  • applyStartTimer elindítja az időzítőt
  • applyRestartTimer leállítja az időzítő funkciót és mindent alapértelmezettre állít
  • végül applyAddSecondellenőrizni fogja, hogy az eltelt idő rövidebb-e, mint az időzítő teljes időtartama. Ha igen, akkor még egy másodpercet ad hozzá az érték növeléséhez. Ha nem, akkor visszaállítja az alapértelmezett állapotot, és leállítja az időzítő funkció futtatását.

Ezt követően meghatározzuk a reduktor függvényünket és exportáljuk ugyanazt a függvényt. Figyelje meg a reduktor funkciójának szervezését. Ezt a mintát követi a legtöbb közösségi tag, akit az interneten láttam.

Ez egy jó forrás a Redux-tal való általános indításhoz Dan Abramov által, és INGYENES!

Redux Store létrehozása?

A reduktor és a kezdeti állapot segítségével létrehozhatjuk a store objektumot.

Az áruház egy olyan objektum, amely összehozza és cselekszik, valamint reduktorokat hoz létre. Az egyes komponensek helyett az alkalmazás szintjén biztosítja és tartja az állapotot. A Redux nem egy véleményes könyvtár, melyik keretrendszer vagy könyvtár használhatja vagy sem.

Ha egy React vagy React Native alkalmazást Redux-hoz kíván kötni, akkor react-reduxmodullal kell megtennie . Ez a magas rendű komponens használatával történik Provider. Alapvetően átadja az üzletet az alkalmazás többi részére.

Időzítő funkciónkkal össze kell kötnünk az akciókészítőket annak érdekében, hogy teljes mértékben működőképessé váljon (így reagál az érinthető eseményekre vagy az időzítő indítására vagy újraindítására). Ezt a Timer/index.jsfüggvényben fogjuk megtenni .

Először importáljuk a szükséges függőségeket az akciókészítők megkötésére.

bindActionCreatorsa cselekvési függvényeket egy objektumhoz térképezi fel, a művelet függvényeinek nevével. Ezek a függvények automatikusan elküldik a műveletet a boltba, amikor a függvény meghívásra kerül. Az adatok megváltoztatásához el kell küldenünk egy műveletet. Ennek engedélyezéséhez két dologra van szükségünk: mapStateToPropsés mapDispatchToProps, és mindkettőt össze kell kötnünk az alkatrészünkkel. Ez az a kazánlap kód, amelyet újraírni fog.

Meghatározzuk ezt a két függvényt és módosítjuk az export defaultállításunkat, miután meghatároztuk a React Native nézet stílusait.

mapStateToPropsegy olyan objektum, amely a boltban él, és amelynek kulcsait az alkatrésznek kellékként továbbadják. Az alábbiakban az Időzítő komponens teljes kódja található.

Az alkalmazás befejezése ⚛️ +?

Létrehoztam egy egyedi függvényt, amelyet formatTimeaz idő megfelelő formátumban történő megjelenítésére hívtunk , de bármilyen időzítő könyvtárat használhat. Ezután az idő értékének növeléséhez a React életciklus-módszert alkalmazom componentWillReceiveProps. Tudom, hogy hamarosan megszűnik, de egyelőre működik. Lásd az alábbi mini-alkalmazást:

A rövidség és a bemutató érdekében csak másodperceket használok az időzítő megjelenítésére. Akkor növeli az értékét az időzítő szerkesztésével állandó értékét TIMER_DURATIONaz reducers.js.

A cikk végére értünk. Remélhetőleg ugyanolyan jól érezted magad, mint én. A cikk teljes kódját ebben a Github repóban találja meg:

amandeepmittal / rn-pomodoro-példa

rn-pomodoro-example - React Native + Redux integaráció github.com

Emlékszel, hogy meséltem egy adott fájlstruktúráról, amelyet a Redux architektúra megvalósításakor követtem? Nos, úgy hívják, hogy újrakacsák mintája, és további részletek találhatók ebben a tájékoztató cikkben Alex Moldovan:

Redux alkalmazásának méretezése kacsákkal

Hogyan skálázódik a kezelőfelület? Hogyan lehet megbizonyosodni arról, hogy az általad írt kód 6 hónapig karbantartható ... medium.freecodecamp.org

? Ha további kérdései vannak, vegye fel a kapcsolatot velem a Twitteren, vagy olvasson el többet rólam a webhelyemen.

Ha szeretne értesülni a React Native című következő cikkemről, fontolja meg a regisztrációt a hírlevelemre.