useState-க்கு பதிலாக useReducer-ஐ எப்போது பயன்படுத்துவீர்கள்?

Question

Accepted Answer

`useReducer` பல `useState` setters-ஐ சிதறடிக்க பதிலாக, ஒரு **pure reducer function**-இல் state மாறுதல்களை மையப்படுத்துகிறது. இது Redux pattern-இன் 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**-ஐ `dispatch` செய்கிறீர்கள் (ஒரு நிகழ்வை விவரிக்கும் சாதாரண object). React `reducer(currentState, action)` என்ற செயல்பாட்டைக் கூறுகிறது மற்றும் திரும்பிய object-ஐ புதிய state-ஆகப் பயன்படுத்துகிறது. Reducer **pure** (side effects இல்லை, mutation இல்லை), இது logic-ஐ சரிபார்க்கக்கூடியதாகவும் isolated-இல் unit-testable-ஆகவும் செய்கிறது. ## useState-க்கு முன்னுரிமை எப்போது - அடுத்த state சாதாரணமற்ற விதங்களில் **முந்தைய** state-இல் **சார்பு** உள்ளது. - பல மதிப்புக்கள் **ஒன்றாக மாறுகின்றன** (எ.கா. `count` + `step` + `error`). - Update logic சிக்கலான வகையில் handlers-இடையே மீண்டும் செய்யக்கூடியது. ```jsx // instead of 4 separate useState + 6 setters, one reducer owns it all ``` போனஸ்: `dispatch` **stable identity**-ஐ கொண்டுள்ளது, எனவே context-க்கூடாக அல்லது memoized children-க்கு அனுப்புவது re-renders-ஐ ஏற்படுத்தாது. எளிமையான, சுதந்திர மதிப்புக்களுக்கு, plain `useState` இன்னும் தெளிவாக உள்ளது.