de Austin Malerba

De ce ar trebui să alegeți useState în loc de useReducer

Un ghid pentru gestionarea statului local și global prin useState

De ce ar trebui sa alegeti useState in loc de

De la introducerea API-ului React Hooks, am văzut multe discuții despre useState, useReducer, și când să folosiți una peste alta. Din aceste conversații, s-ar ajunge la concluzia că useState este cel mai potrivit pentru starea simplă cu logică simplă de actualizare și asta useReducer este cel mai bun pentru forme complexe de stare cu logică de actualizare complexă.

Sunt aici pentru a vă convinge că când este înfășurat într-un cârlig personalizat de 4 linii, useState poate fi la fel de puternic ca, dacă nu chiar mai puternic decât, useReducer la gestionarea stării complexe.

Nu-mi plac reductoarele. Am încercat să le folosesc, dar ajung mereu să plec. Ceva se simte în neregulă cu privire la trimiterea acțiunilor pentru a declanșa logica de afaceri atunci când aș putea face acest lucru invocând o funcție cu argumente.

Și apoi există faptul că, în loc să încapsulez logica mea de afaceri în funcții, ar trebui să le grupez pe toate într-o funcție gigantă partiționată de o grămadă de cazuri de comutare? Am încercat biblioteci precum acțiuni redux pentru a atenua această îngrijorare, dar încă nu m-am putut descurca. Antipatia mea pentru reductoare m-a motivat să caut o soluție mai bună.

Să analizăm câteva motive obișnuite pentru care oamenii aleg useReducer peste useState:

  1. Deci logica de afaceri poate fi centralizată în reductor, spre deosebire de împrăștiată în jurul componentei
  2. Reductoarele sunt funcții pure care sunt ușor de testat izolat de React
  3. Reductoarele permit actualizarea predictibilă a unor bucăți de stare care depind unele de altele (în timp ce multiple useStates-ar putea să nu)

Dacă oricare dintre aceste gloanțe este confuz, aș recomanda să aruncați o privire la asta articol. De-a lungul acestui ghid, mă voi referi la aceste elemente ca fiind cele trei avantaje ale reductoarelor.

Primul pas: Construirea unui exemplu

Mai întâi, vă voi arăta un exemplu care prezintă beneficiile reductoarelor pe care le-am menționat mai sus și apoi vă voi arăta cum puteți implementa aceeași funcționalitate prin useState fără a sacrifica vreunul dintre beneficiile unei useReducer soluţie.

Un contor congelabil

Pentru a ilustra avantajele / dezavantajele useState vs. useReducer Voi implementa un contor simplu cu o întorsătură. Contorul poate fi incrementat, dar poate fi și înghețat. Dacă este în stare înghețată, incrementarea contorului nu va face nimic.

După cum puteți vedea, am implementat o dată contorul nostru de mai sus useState și odată cu useReducer. In orice caz, StateCounterV1 are unele probleme. De fapt, nici măcar nu funcționează așa cum era de așteptat.

Ne-am aștepta la asta StateCounterV1 ar trebui să redea <div>1