Kada naudotumėte useReducer vietoj useState?

Question

IT Interview Practice · Accepted Answer

`useReducer` centralizuoja state permainas vienoje **pure reducer funkcijoje**, vietoj to, kad išsklaidytumėte daug `useState` setterių. Tai React integruota Redux šablono versija. ```jsx function reducer(state, action) { switch (action.type) { case "increment": return { count: state.count + 1 }; case "setStep": return { ...state, step: action.payload }; case "reset": return { count: 0, step: 1 }; default: return state; } } function Counter() { const [state, dispatch] = useReducer(reducer, { count: 0, step: 1 }); // describe WHAT happened, not HOW state changes: return ; } ``` ## Kaip jis veikia Jūs `dispatch` **akciją** (paprastą objektą, aprašantį įvykį). React iškviečia `reducer(currentState, action)` ir naudoja grąžintą objektą kaip naują state. Reducer yra **pure** (nėra šalutinių efektų, nėra mutacijos), o tai daro logiką numatomą ir vieneto-testuojamą izoliacijoje. ## Kada jį geriau naudoti nei useState - Kitas state **priklauso nuo ankstesnio** state netrivialiais būdais. - Kelios reikšmės **keičiasi kartu** (pvz. `count` + `step` + `error`). - Atnaujinimo logika yra pakankamai sudėtinga, kad ją kartotumėte keliuose tvarkytuvuose. ```jsx // instead of 4 separate useState + 6 setters, one reducer owns it all ``` Bonus: `dispatch` turi **stabilią identitą**, todėl jos perdavimas per kontekstą arba į memorizuotus vaikus nesukelia re-renderimo. Paprastiems, nepriklausomiems reikšmėms plain `useState` yra vis dar aiškesnis.

Kaip jis veikia

Kada jį geriau naudoti nei useState

Susiję klausimai