તમે useReducer ને useState ની જગ્યાએ ક્યારે વાપરશો?

Question

Accepted Answer

`useReducer` એક **શુદ્ધ reducer ફંક્શન**માં સ્ટેટ ટ્રાન્જિશન્સને કેન્દ્રીય કરે છે, બહુ બધા `useState` setters ને ધરાવતાં બતાવે છે. તે Redux પેટર્નનું React નું બિલ્ટ-ઇન સંસ્કરણ છે. ```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 ; } ``` ## તે કેવી રીતે કામ કરે છે તમે એક **action** મોકલો છો (એક સરળ ઑબ્જેક્ટ જે ઘટના વર્ણવે છે). React `reducer(currentState, action)` કોલ કરે છે અને પરત કરેલ ઑબ્જેક્ટને નવી સ્ટેટ તરીકે વાપરે છે. Reducer **શુદ્ધ** છે (કોઈ પાર્શ્વ આસરો નથી, કોઈ મ્યુટેશન નથી), જે તર્ક અનુમાનિત અને એકમ-પરીક્ષણીય બનાવે છે। ## useStateની જગ્યાએ તેને કখાં પસંદ કરશો - આગલી સ્ટેટ **આગલી સ્ટેટ પર આધારિત** છે બિન-તુચ્છ રીતે. - બહુ **એક સાથે બદલાય** છે (દા. તર. `count` + `step` + `error`). - અપડેટ તર્ક બહુ જટિલ છે કે તમે તેને હેન્ડલર્સ પર ફરી કરશો. ```jsx // instead of 4 separate useState + 6 setters, one reducer owns it all ``` બોનસ: `dispatch` એક **સ્થિર ઓળખ** ધરાવે છે, તેથી તેને context કે memoized બાળકો સુધી પાસ કરવું re-renders નું કારણ નથી બને છે. સરળ, સ્વતંત્ર મૂલ્યોના માટે, સાદું `useState` હજુ પણ સ્પષ્ટ છે.