A kezdő útmutató a reagáláshoz / reduxhez - hogyan kezdje el a tanulást, és ne kerüljön túlzottan

Fotó: Roman Mager az Unsplash-en

Jogi nyilatkozat: Ez egy kezdő útmutató, amelyet a React / Redux kezdő kezdője írt.

Ijesztő feladat lehet egy új Javascript keret 2017 elsajátítása. Mondja, hogy végre megértette Angular-t, de mindenki továbbhaladt ehhez a fényes új dologhoz, az úgynevezett React. Elolvasta néhány oktatóanyagot, és alig várja, hogy konfigurálja az új React projektet. Várj, van egy másik cikk, amely szerint a Redux használatával kell kezelnie az új alkalmazás állapotát. A kezdők mind kapcsolódhatnak ehhez a cikkhez. Egy közbenső devinak tartom magam, és így is érzem magam.

Amikor megpróbáltam elindítani a React / Redux projektet, számtalan cikket böngésztem a fájlmappák felépítéséről: típus szerint csoportosítva, összetevők szerint csoportosítva, domain szerint csoportosítva stb.

forrás: http://gph.is/2k9DFT4

Rájöttem, hogy valahol kell kezdenem. Az aha pillanat később jön. A folyamat során megértem az egyes megközelítések előnyeit és hátrányait. Ezt követheti egy fájdalmas refaktálás, de ez értékes tanulságokat fog tanulni. És éppen azért épültem, hogy tanuljak.

1. lépés: Válasszon egy hozzáértő megközelítést, és tartsa be azt

Követtem ezt az útmutatót.

Tanulási megközelítésem az volt, hogy elkezdtem kódolni a saját alkalmazásomat a szerző gondolkodási folyamatának követésével. Úgy gondolom, hogy a cikk az egyik leghasznosabb útmutatás. Még mindig túl sok lehet, ha valaki a React / Redux-ban indul, ezért dokumentáltam az utamat, és az oktatóanyag levágott változatává alakítottam.

2. lépés: Kezdje a kicsi

A célom eleinte nagyon egyszerű volt: készítsen egy listát azokról a cikkekről, amelyeket összegyűjtöttem egy hírgyűjtő alkalmazás segítségével. A hírbázisból származó válasz cikkek lesz a következő adatszerkezettel.

Olvassa el az Ethereumról szóló cikkek listáját

3. lépés: Válasszon egy kazánlemezt

A Fullstack Akadémián dolgozó kedves oktatóim által létrehozott kazánlapot használtam. (Nem értem el ott a React / Redux vonatot. A kohortam az utolsó, amelyik AngularJS-t tanul.) Azért választottam ezt a kazánlemezt, mert a fullstack javascriptet használja: React / Redux a kezelőfelület és Express / Sequelize / PostgreSQL a háttér számára. E feladat céljából egy kissé megtisztítottam a kazánlapot az Express / Sequelize / PostgreSQL nélküli emberek számára, hogy követni tudják őket. Mostantól csak a React / Redux-szal fogunk együttműködni.

Itt található a repo, amely tartalmazza a gyakorlat kezdőpontját és kész kódját.

Ez a fájlszerkezet.

src /
  alkatrészek/
    ListView.js
    ListRow.js
  konténerek /
    ArticlesIndex.js
  szolgáltatások /
    articles.js
  bolt/
    cikkek /
      actions.js
      actionTypes.js
      reducer.js
    index.js

Mielőtt elkezdené az oktatóanyagot, ha olyan kifejezések, mint az akció és a reduktor, nem csengenek, nagyon ajánlom, hogy olvassa át az alapfogalmat a Redux hivatalos dokumentációjában vagy az általam írt cikkben:

4. lépés: Indítsa el a Redux állapotot

Milyen állapotban van alkalmazásunk? Egy egyszerű, egyoldalas alkalmazásról beszélünk, amelyben cikkek vannak felsorolva. Tárolnunk kell a kiszolgálóról beolvasott cikkek listáját. Ha megnézi az cikkeket.js az src / szolgáltatások / cikkek részben, látni fogja a tömböt, amelyben cikkek vannak feltöltve. Mivel ennek a gyakorlatnak a célja a React / Redux architektúra adatfolyamának megismerése, a getAllArticles () függvény közvetlenül visszaadja a szükséges cikkeket. A való világban ez a funkció aszinkron hívás lesz egy távoli API-hoz.

Most a kérdés az, hogy hogyan szerkesztjük államunkat. A szerver által adott válasz (vagy ebben az esetben a getAllArticles függvény) objektumok tömbje. Az államunkba tehetjük.

De ez a legjobb módja az állam modellezésének? Fontolja meg azt a forgatókönyvet, ahol frissítenie kell egy cikkbejegyzést. Az alkalmazás a tömbön keresztül iterál, hogy megtalálja a keresett híreket. Mi van, ha a tömb mérete igazán nagy? Ez a megközelítés nem lesz nagyon eredményes.

Ha az államot objektummal strukturáljuk, akkor a cikkhez való hozzáférés kereséské válik. Cikkek megjelenítéséhez további tömb azonosítókat tárolhatunk.

5. lépés: Végezze el az adatfolyam kezdetétől a végéig az Ön állapotát

Hogyan frissíthetjük ezt az állapotot? Itt lépnek be a cselekvés és a reduktor. Fontolja meg ezt a folyamatábrát:

Mi a felhasználói interakciónk? Azt szeretnénk, hogy az oldal betöltésekor megjelenjen a cikkek listája, tehát ez nem sokkal inkább interakció. Ehhez a komponentDidMount-nal kezdjük a React nézetben. Küldhetünk egy cikket az árucikkek visszakeresése céljából, és értesíthetjük a reduktorot. A reduktor értékeli a műveletet és frissíti az állapotot. A frissített állapot kiváltja az összetevő megjelenítését.

Kezdjük azzal, hogy meghatározzuk az alkalmazásunk műveleteinek típusát. Ez egy egyszerű, állandó meghatározás a cikkek letöltésére. Később mindig hozzáadhatunk további meghatározásokat, például bejegyzés frissítéséhez vagy törléséhez.

Most kezdjük meg az akciót. Ne felejtse el, hogy a háttérprogram által adott válasz egy objektum tömb, és objektummá változtatjuk a keySy funkcióval.

A reduktor kiértékeli a művelet típusát és hasznos teherét tartalmazó sima tárgyat. Ezután az adatokat az állapotban tárolja.

6. lépés: Megjelenítés

Csatlakozunk egy ArticleIndex nevű tárolót a cikk állapotához. Az AritcleIndex egy intelligens tároló, amely képes kommunikálni a Redux üzlettel. A ArticleIndex belsejében egy buta komponens található, a ListView nevû elem, amelyet Tal Kol írt, az általam követett Redux bemutató szerzõje. A megvalósítást a komponensek mappában ellenőrizheti.

A ListView átveszi a articlesById-t, egy cikkszám-azonosítót és egy megjelenítési függvényt. Ezután elkészíti a cikkek listáját.

Hogyan kaphatjuk meg a cikkeketById és egy sor cikk azonosítót? Itt egy áttekintés a Redux központi koncepciójáról. A reaktív nézet a reaux-redux könyvtár által biztosított csatlakoztatási funkción keresztül kapcsolódik a Redux állapothoz.

Íme a kód, amely megteszi azt, amit ez a diagram leír. Alján leképezzük a Redux állapotát és küldjük el a React kellékeire. Az összetevőDidMount-ban meghívjuk a loadArticles fájlt, amely elküldi a fetchAllArticles műveletet. Miután az állapot cikkekkel frissült, a articlesById a mapStateToProps által a React nézetbe kerül.

És ez az! Van böngészőnkben cikkek listája!

7. lépés: Anti-mintázat valahol a kódban?

A React / Redux adatfolyamának megtanulása céljából eddig egy másik Redux koncepciót figyelmen kívül hagytunk. A reagált komponensnek a Redux állapotához szelektorokon keresztül kell hozzáférnie. A választók általában a reducer.js fájlokban találhatók. Tiszta funkciók, amelyek hozzáférnek a Redux állapothoz és visszaadnak néhány állapot tulajdonságot. Ha a választókapcsoló a helyén van, akkor ha módosítja a Redux állapotát, amely egynél több összetevőt érint, akkor csak a választót kell frissítenie.

Itt található a getArticles választó:

A mapStateToProps függvény az ArticleIndex.js fájlban a következő lesz:

Bónusz: Kövesse ugyanazt a gondolkodási folyamatot, és készítsen egy szűrőt

A cikkek listájával felvehetünk egy csomó különféle műveletet. Például a cikkek mind az Ethereummal kapcsolatos hírek. Két kategóriába sorolhatók: kriptovaluta közösség hírei és a mainstream média hírei. Miután elkészítettük a cikkek listáját, hozzáadtam egy típusszűrőt ugyanazzal a gondolkodási eljárással.

Öblítés, ismétlés, reaktor

A React / Redux megtanulása olyan, mint egy nyúllyukba ugrás, ám szkeptikusből hívővé vált. Remélem, hogy ez a cikk elindítja a tanulást.

A kezdeti csecsemő lépéstől kezdve a tanulási projekt hírösszegzővé és trendeket követő alkalmazásgé vált.

Köszönöm hogy elolvastad!

Ha Steemit-en vagy, a blokkláncú közösségi média (olyan, mint a Reddit és a Medium szerelmes gyermeke) ide esik: