Moderní architektura pro aplikace v Reactu

[oss]

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.

[Reklama]

[PitB]

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..]

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.

[oss]

Vdaka za odpoved, su aj nejake ine odporucania ako modelovat stav?
Alebo nieco efektivne na pracu s dynamickymi formularmi?

[L..]

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/

[Reklama]

[fortran1986]

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.

[fortran1986]

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..]

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é.

[Google CTCCTCGGCGGGCACGTAG]

kontext si nepamatuje předchozí stavy.

[Google CTCCTCGGCGGGCACGTAG]

kontext si nepamatuje předchozí stavy.

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

[Patek13]

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..]

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]

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