Moderní architektura pro aplikace v Reactu

oss

  • ***
  • 229
    • Zobrazit profil
    • E-mail
Moderní architektura pro aplikace v Reactu
« kdy: 07. 04. 2020, 09:12:46 »
Asi po styroch rokoch som bol nuteny sa vratit k Ractu. Vsade, kde sa pozriem hovoria, ze sa maju pouzivat uz len React Hooks a tak sa mi zda, ze react to doiteroval k Angularu len namiesto metod pouziva vnorene funkcie/procedury.

A moja otazka: Budem robit vetsiu apliaciu plnu velkych formularov a tabuliek. Aku architekturu mam zvolit pre React? Stale sa pouziva redux? Ak hej, ako sa modluje stav v komponentach verzus globalny stav?

Kód: [Vybrat]
globalstate
   - pageState1 : PageState1
   - pageState2 : PageState2
   - pageState2 : PageState2

alebo

Kód: [Vybrat]
globalstate
   - state: PageState1 | PageState2 | PageState2

Ani neviem ako zacat, vsteky tutorialy koncia pri hello world.
« Poslední změna: 07. 04. 2020, 10:07:22 od Petr Krčmář »


Re:Moderní architektura pro aplikace v Reactu
« Odpověď #1 kdy: 07. 04. 2020, 10:15:45 »
Já jsem začal s Reactem před rokem, takže už rovnou s hooky a bez Reduxu. Pokud už potřebuju, používám useContext, ale to se mi zatím stalo jen jednou. Ve srovnání s tím, jak je teď state jednoduchý díky useState, mi context přijde zbytečně komplikovaný.
Jinak hlavně tady: https://reactjs.org/docs/hooks-reference.html

L..

  • ****
  • 302
    • Zobrazit profil
    • E-mail
Re:Moderní architektura pro aplikace v Reactu
« Odpověď #2 kdy: 07. 04. 2020, 10:28:39 »
A tím Angularem je to nesmysl, React se od něj čím dál víc vzdaluje tím, jak s hooky je možné prakticky se komplet vybodnout na komponenty ve třídách a dělat je jen jako funkce. Čímž se to celé dále zjednodušuje. Vezmi si, kolik toho v Anglaru musíš nadatlit, abys udělal komponentu. V Reactu prostě napíšeš jednoduchou funkci. Plus hooky odstranily šílený wrapper hell, který občas nastával.

Ale to jsem odbočil. Lokální stav (useState) a Redux nejdou proti sobě, doplňují se. Stav, který je lokální pro danou komponentu si ukládáš přes useState a nemusíš s ním zaplevelovat globální Redux. Občas se hodí využít dokonce lokální reducer (useReducer). Redux je naopak vhodný pro ukládání stavu, ke kterému potřebuje přistupovat víc komponent, který má přežít lifecycle komponenty atp.

Samozřejmě jedna komponenta může mít něco napojené z Redux store a něco mít v lokálním stavu. Co se týče toho globálního stavu, tak je to samozřejmě ta první z možností, co jsi uvedl (pro každou stránku extra), bastlit to do jednoho slice je hrozná prasárna. Plus tedy to ani nemusí být dělené dle stránek, ale klidně v aplikaci mohou být i jiné logické celky.
« Poslední změna: 07. 04. 2020, 10:34:23 od L.. »

oss

  • ***
  • 229
    • Zobrazit profil
    • E-mail
Re:Moderní architektura pro aplikace v Reactu
« Odpověď #3 kdy: 07. 04. 2020, 15:40:58 »
Vdaka za odpoved, su aj nejake ine odporucania ako modelovat stav?
Alebo nieco efektivne na pracu s dynamickymi formularmi?

L..

  • ****
  • 302
    • Zobrazit profil
    • E-mail
Re:Moderní architektura pro aplikace v Reactu
« Odpověď #4 kdy: 07. 04. 2020, 15:55:45 »
Pro Redux je přímo od jeho autorů hezká "style guide", kde shrnují best practices a naopak antipatterny: https://redux.js.org/style-guide/style-guide

Co se týče formulářů, doporučil bych na ně knihovnu: https://github.com/final-form/react-final-form#-react-final-form (ukládá je do lokálních stavů).

Pokud byste náhodou z nějakého důvodu potřeboval ukládat formuláře do Reduxu, tak potom: https://redux-form.com/8.3.0/


Re:Moderní architektura pro aplikace v Reactu
« Odpověď #5 kdy: 07. 04. 2020, 20:05:06 »
Hej v Reacte sa ukladaju stavy na dve miesta bud lokalne priamo v komponente alebo sa pouzije globalny state (redux, pripadne ine riesenie). Hooky su len na to aby sa lokalny state dal pouzivat aj vo FunctionComponent. Inak lokalny state ma React uz od svojho vzniku, ale donedavna fungoval len vramci tried. A FunctionComponent si museli vystacit s Reduxom.

Pri vacsej aplikacii je potrebne stav medzi komponentami zdielat. Nato sa pouziva ten Redux pripadne Reactovy context co je cca 2 roky stara - "novinka" (a vyvojari nim Redux nahradzaju pretoze narozdiel od Reduxu je priamo sucastou Reactu).

Btw na globalny state si treba dat velky pozor a naucit sa ho pouzivat. Lebo uz som sa stretol s aplikaciou kde vyvojari striktne vobec nepouzivali lokalny state (koli hot reloadingu) lenze potom jak sa ta aplikacia rozrastala zacala mat velke problemy s vykonom. Takze treba si na to dat velky pozor a co patri do komponenty netreba zbytocne pchat do reduxu.

Re:Moderní architektura pro aplikace v Reactu
« Odpověď #6 kdy: 07. 04. 2020, 20:17:02 »
co je kontext si mozes pozriet tu: https://reactjs.org/docs/context.html

A hooky som zatial pouzival len minimalne ak je komponenta natolko komplikovana ze potrebuje lokalny state tak radsej pouzijem triedu. Samozrejme je to vec osobnych preferencii a zvyku, niekomu mozu viac vyhovovat funkcie. Ja functional component pouzivam fakt len na uplne primitivne komponenty.

L..

  • ****
  • 302
    • Zobrazit profil
    • E-mail
Re:Moderní architektura pro aplikace v Reactu
« Odpověď #7 kdy: 07. 04. 2020, 22:21:08 »
No, trochu pozor, kontext není úplně náhrada Reduxu. V zásadě se dá říct, že Redux je kontext + reducer pattern + nějaké věcičky kolem toho (třeba pattern selectorů).

Člověk musí trochu vědět, co dělá, jinak se právě může dostat do výkonových problémů typu že se při každé změně v Reduxu / kontextu přerenderuje celá stránka a to není úplně dobré.

Re:Moderní architektura pro aplikace v Reactu
« Odpověď #8 kdy: 07. 04. 2020, 22:28:41 »
kontext si nepamatuje předchozí stavy.

Re:Moderní architektura pro aplikace v Reactu
« Odpověď #9 kdy: 07. 04. 2020, 23:55:12 »
kontext si nepamatuje předchozí stavy.

přesněji, nedá se elegantně pracovat s předchozími stavy

Re:Moderní architektura pro aplikace v Reactu
« Odpověď #10 kdy: 23. 04. 2020, 19:23:15 »
Já na formuláře doporučuju react-hook-form.

A k redux-form - pro ukázku jak aplikace laguje, když se každým stiskem klávesy updatuje stav v reduxu a musí se porovnat strom úplně všech komponent stránky.. mrkněte sem https://demo.flexibee.eu/flexi/demo/faktura-vydana/

L..

  • ****
  • 302
    • Zobrazit profil
    • E-mail
Re:Moderní architektura pro aplikace v Reactu
« Odpověď #11 kdy: 24. 04. 2020, 17:29:56 »
react-hook-form taky vypadá docela dobře, byť praktické zkušenosti nemám.

Jinak FlexiBee mě nelaguje a obecně redux-form má napojenou každou komponentu zvlášť, takže se při změně klávesy přerenderuje jen tak komponenta (pokud hodnota v poli není napojena ještě jinam a nemá další efekty).

oss

  • ***
  • 229
    • Zobrazit profil
    • E-mail
Re:Moderní architektura pro aplikace v Reactu
« Odpověď #12 kdy: 27. 04. 2020, 09:42:50 »
Já na formuláře doporučuju react-hook-form.

A k redux-form - pro ukázku jak aplikace laguje, když se každým stiskem klávesy updatuje stav v reduxu a musí se porovnat strom úplně všech komponent stránky.. mrkněte sem https://demo.flexibee.eu/flexi/demo/faktura-vydana/

Ta ukazka je pekne pomala...
A to fakt je pravda, ze na to aby bol React pouzitelny bez dalsich 10-tich kniznic  :'(