Advanced ReactJS: Doporučené postupy pro React + Redux + Sagas

káva k zamyšlení

Nejdříve první, rychlý úvod k tomu, co je React. Jde o knihovnu JavaScriptu používanou pro vytváření uživatelských rozhraní. Od té doby, co vyšlo, změnilo přední vývojové prostředí. Pokud tedy chcete být předním webovým vývojářským knihovnám, jako jsou React nebo Vue.js, je v dnešním průmyslu téměř zásadní. Pokud se teprve začínáte učit React, je to skvělý návod. https://reactjs.org/tutorial/tutorial.html.

Pamatuji si, když jsem se začal učit React. Vždycky jsem měl pocit úzkosti, že jsem se nikdy nemohl naučit vše, co jsem potřeboval, neustále se měnící jazyk JavaScriptu vynořující se nad mou hlavou, a pokud jsem někdy udělal něco v pořádku, vždycky bych se nakonec zeptal sám sebe, byl to opravdu nejlepší způsob udělat to? Po doslova stovkách online tutoriálů, vyhledávání na YouTube a nedokončených (a pravděpodobně nemytých) šálcích kávy jsem konečně pevně pochopil, co se React pokouší přenést do tabulky JavaScriptu.

Vždy jsem se však snažil najít tutorial, který spojuje všechny pokročilé koncepty React do jednoho kompaktního tutoriálu.

Také si pamatuji, že je těžké tyto pojmy pochopit, když byly použity uvnitř velkého zdrojového kódu. To je mezera, kterou se tento článek snaží zaplnit. Do naší jednoduché aplikace jsou zabudovány pokročilé nástroje a koncepty, jedná se pouze o výukové účely a neměli byste je používat, pokud je aplikace nepotřebuje.

Dost s chit-chatem. Pojďme mluvit kód. Stáhněte si hotový kód z tohoto repo a postupujte podle README, abyste mohli vidět a cítit, co zde budeme stavět. https://github.com/jelorivera08/react-starter-pack.

Vstupní stránka aplikace

Nahoře můžete vidět stav počítání a čtyři tlačítka, která spouští jejich příslušné akce. Jejich činy jsou samovysvětlující.

selektory

Zaměřte se na soubor selectors.js uvnitř kontejneru Counter. Prvním pokročilým konceptem, který zde řešíme, je createSelector. Při pohledu na kód nejprve proměnná const count načte stav počítání uvnitř stromu stavu redux pomocí state.get („count“).

Poté pomocí této metody vytvoříme selektor. To nám pomáhá formátovat stav / data, která přijímáme ze stromu stavu redux, a tím ušetříme spoustu času kódováním nových funkcí, které se zabývají restrukturalizací státu nebo formátováním cílového stavu pokaždé, když to potřebujeme, aby se něco dopředu zobrazilo -konec. V tomto příkladu jsem nezměnil stav, který jsem obdržel. Právě jsem vrátil holý stát pro demonstrační účely.

Výsledná funkce bude poté použita uvnitř mapStateToProps a u mapStateToProps je samozřejmě další věcí, kterou nakonfigurovat, mapDispatchToProps.

vytvářet akce

Kdykoli odesíláme akce reduktoru, musíme vždy deklarovat jeho typ a odpovídající přepínací případ reduktoru, který vstoupí později, aby se změnil stav aplikace. S balíčkem createActions z reduxsauce můžeme zasáhnout dva ptáky jedním kamenem. Abychom mohli plně využít výhody tohoto balíčku, měli bychom také zformátovat reduktor s reduxsauce.

redukce

Nahoře je redukce naší aplikace. Počáteční stav je uzavřen API API fromJS od neměnného a jak se používá název balíčku, chrání počáteční stav před mutací. Reagovat s tímto konceptem je velmi přísné, proto mějte na paměti. API createReducer z reduxsauce má dva argumenty.

Nejprve počáteční stav. Za druhé, objekt, který má klíče pro typy akcí a hodnoty jako funkci, kterou reduktor spustí, jakmile se typ shoduje s výzvou k odeslání. Sloučit a podle toho změní strom stavu redux. Neexistuje aplikace pro skutečný život, která neví, jak zpracovat asynchronní volání API, že? Že jo.

redux sága

Zde je část ságy našeho programu. Všechno je stejné, kromě toho, jak nazýváme naše činy. Využíváme typovou akci, kterou jsme vytvořili dříve, a využíváme je uvnitř naší ságy pozorovatele, abychom odeslali asynchronní volání, která později ovlivní náš strom stavu redux.

Zpožděním je zesměšňovat latenci sítě pro mnohem lepší asynchronní pocit aplikace. A konečně, ujistěte se, že na výkon nezapomínáme.

rozdělení kódu

Rozdělení kódu je skvělý způsob, jak zlepšit výkon webových aplikací. Kód JavaScript zabírá nejvíce údajů o uživatelích. Pamatujte, že díky rozdělení kódu umožňuje koncovému uživateli stáhnout pouze část kódu, kterou potřebuje pro efektivitu spotřeby dat.

Na závěr,

Existuje spousta balíčků a nástrojů, které nám pomáhají, softwaroví inženýři vytvořit čistší a mnohem efektivnější kód. přichází s náklady, náklady na pochopení základního systému, a to je myšlení v React.

Learning React vyžaduje, abyste posunuli své kódovací paradigma do mnohem odlišnějšího ve srovnání s předchozí sadou kódování v front-endu. Nástroje a balíčky, o kterých jsem hovořil v tomto článku, shrnují ty principy, které jsou nutné pro krásné a efektivní kódování v React, a to je výjimečný vývojář.

Vždycky jsou to malé věci.

Díky tomu doufám, že jsem vám pomohl dále porozumět React s tímto malým článkem. Na zdraví!