Advanced ReactJS: Osvedčené postupy pre React + Redux + Sagas

káva na zamyslenie

Najprv prvé, rýchly úvod o tom, čo je React. Je to knižnica JavaScript, ktorá sa používa na vytváranie používateľských rozhraní. Už od svojho vzniku sa zmenilo front-endové vývojové prostredie. Ak sa teda usilujete stať sa front-end knižnicou pre vývojárov webu, ako sú React alebo Vue.js, je v dnešnom priemysle takmer nevyhnutná. Ak sa práve začínate učiť React, je to vynikajúci návod. https://reactjs.org/tutorial/tutorial.html.

Pamätám si, keď som sa začal učiť React. Vždy som mal pocit úzkosti, že som sa nikdy nemohol naučiť všetko, čo som potreboval, neustále sa meniaci jazyk JavaScript vynárajúci sa nad moju hlavu, a ak by som niekedy dosiahol niečo v poriadku, vždy by som sa nakoniec opýtal sám seba, bol to skutočne najlepší spôsob urobiť to? Po doslova stovkách online návodov, vyhľadávaní na Youtube a nedokončených (a pravdepodobne nemytých) šálok kávy som si konečne pevne uvedomil, čo sa React pokúša priniesť do tabuľky JavaScriptu.

Vždy som sa však snažil nájsť tutorial, ktorý spája všetky pokročilé koncepty React do jedného kompaktného tutoriálu.

Tiež si pamätám, že ťažko chápem tieto pojmy, keď boli použité vo veľkom zdrojovom kóde. To je medzera, ktorú sa tento článok snaží vyplniť. Do našej jednoduchej aplikácie sú vložené pokročilé nástroje a koncepty, ktoré slúžia výhradne na účely výučby. Tieto pojmy by ste nemali používať, ak ich vaša aplikácia nepotrebuje.

Dosť s chit-chatom. Poďme hovoriť kód. Stiahnite si hotový kód z tohto repa a postupujte podľa README, aby ste videli a cítili, čo tu budeme stavať. https://github.com/jelorivera08/react-starter-pack.

Vstupná stránka aplikácie

Hore vidíte stav počítania a štyri tlačidlá, ktoré spúšťajú ich príslušné akcie. Ich činy sú samovysvetľujúce.

selektory

Zamierte na súbor selectors.js vo vnútri kontajnera Counter. Prvým pokročilým konceptom, ktorý tu riešime, je createSelector. Pri pohľade na kód najprv premenná const count načíta stav počítania vo vnútri stromu redux status pomocou state.get („count“).

Potom pomocou uvedenej metódy vytvoríme selektor. To nám pomáha formátovať stav / dáta, ktoré prijímame zo stromu stavu redux, a tým ušetríme veľa času kódovaním nových funkcií, ktoré sa zaoberajú reštrukturalizáciou štátu alebo formátovaním cieľového stavu zakaždým, keď ho potrebujeme na vykreslenie niečoho vpredu. -koniec. V tomto príklade som nezmenil stav, ktorý som dostal. Práve som vrátil holý štát na demonštračné účely.

Výsledná funkcia sa potom použije vo vnútri mapStateToProps a spolu s mapStateToProps je ďalšou konfiguráciou mapDispatchToProps.

vytvárať akcie

Vždy, keď odosielame akcie reduktora, musíme vždy oznámiť jeho typ a zodpovedajúci prípad prepínača reduktoru, ktorý vstúpi neskôr, aby sa zmenil stav aplikácie. S balíkom createActions z reduxsauce môžeme naraziť na dva vtáky jedným kameňom. Mali by sme tiež naformátovať reduktor s reduxsauce, aby sme mohli tento balík naplno využívať.

reduktor

Hore je reduktor našej aplikácie. Počiatočný stav je ohraničený rozhraním fromJS API od nemenného a ako sa používa názov balíka, chráni počiatočný stav pred zmutovaním. Reagovať s týmto konceptom je veľmi prísne, preto majte toto na pamäti. API createReducer z reduxsauce má dva argumenty.

Po prvé, počiatočný stav. Po druhé, objekt, ktorý má kľúče pre typy akcií a hodnoty ako funkciu, ktorú reduktor spustí, keď sa typ zhoduje s výzvou na odoslanie. Zlúčiť potom príslušne zmení stavový strom redux. Neexistuje žiadna aplikácia v reálnom živote, ktorá nevie, ako spracovať asynchrónne volania API, je to tak? Správny.

redux sága

Toto je sága súčasťou nášho programu. Všetko je rovnaké, okrem toho, ako nazývame naše činy. Využívame typovú akciu, ktorú sme vytvorili skôr, a využívame ich v rámci našej ságy pozorovateľa, aby sme mohli odoslať asynchrónne volania, ktoré budú mať neskôr vplyv na náš stromový stav redux.

Oneskorenie je tu na zosmiešnenie latencie siete kvôli oveľa lepšiemu asynchronickému pocitu aplikácie. A konečne, nezabudnite na výkon.

rozdelenie kódu

Rozdelenie kódu je skvelý spôsob, ako zlepšiť výkon webových aplikácií. Kód JavaScript zaberá najviac údajov o používateľoch. Pamätajte, že vďaka rozdeleniu kódu umožňuje koncovému používateľovi sťahovať iba časť kódu, ktorú potrebuje na efektívnu spotrebu údajov.

Na záver,

Existuje veľa balíkov a nástrojov, ktoré nám pomáhajú, softvéroví inžinieri vytvoriť čistejší a oveľa efektívnejší kód. prichádza s nákladmi, nákladmi na porozumenie základnému systému, a to myslí v Reacte.

Learning React vyžaduje, aby ste posunuli svoje kódovacie paradigma do omnoho odlišnejšieho paradigmy v porovnaní s predchádzajúcou sadou kódovania v prednej časti. Nástroje a balíčky, o ktorých som hovoril v tomto článku, zhŕňajú tie zásady, ktoré sú potrebné na krásne a efektívne kódovanie v službe React, a vďaka tomu je výnimočný vývojár.

Vždy sú to malé veci.

Preto dúfam, že som vám pomohol pri ďalšom porozumení Reactu týmto malým článkom. Na zdravie!