ਤੁਸੀਂ useReducer ਦੀ ਥਾਂ useState ਦੀ ਵਰਤੋਂ ਕਦੋਂ ਕਰਦੇ ਹੋ?

Question

Accepted Answer

`useReducer` ਇੱਕ ਸਿੰਗਲ **ਸ਼ੁੱਧ reducer ਫੰਕਸ਼ਨ** ਵਿੱਚ state ਸੰਖਿਆ ਨੂੰ ਕੇਂਦਰੀ ਕਰਦਾ ਹੈ, ਬਜਾਏ ਬਹੁਤ ਸਾਰੇ `useState` setters ਨੂੰ ਖਿੰਡਾਉਣ ਦੇ। ਇਹ React ਦਾ Redux ਪੈਟਰਨ ਦਾ built-in ਸੰਸਕਰਣ ਹੈ। ```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` ਕਰਦੇ ਹੋ (ਇੱਕ ਸਾਦਾ ਵਸਤੂ ਜੋ ਕਿਸੇ ਘਟਨਾ ਦਾ ਵਰਣਨ ਕਰਦਾ ਹੈ)। React `reducer(currentState, action)` ਨੂੰ ਕਾਲ ਕਰਦਾ ਹੈ ਅਤੇ ਵਾਪਸ ਕੀਤੀ ਗਈ ਵਸਤੂ ਨੂੰ ਨਵੇ state ਦੇ ਰੂਪ ਵਿੱਚ ਵਰਤਦਾ ਹੈ। reducer **ਸ਼ੁੱਧ** ਹੈ (ਕੋਈ side effects ਨਹੀਂ, ਕੋਈ mutaton ਨਹੀਂ), ਜੋ ਤਰਕ ਨੂੰ ਭਵਿਸ਼ਵਾਣੀਯੋਗ ਅਤੇ ਅਲਗ-ਅਲਗ unit-testable ਬਣਾਉਂਦਾ ਹੈ। ## ਜਦੋਂ useState ਨਾਲੋ ਇਸ ਨੂੰ ਤਰਜੀਹ ਦਿੱਤੀ ਜਾਵੇ - ਅਗਲਾ state **ਪਿਛਲੇ** state ਉੱਤੇ ਗੈਰ-ਮਾਮੂਲੀ ਤਰੀਕਿਆਂ ਵਿੱਚ **ਨਿਰਭਰ** ਹੁੰਦਾ ਹੈ। - ਕਈ ਮੁੱਲ **ਇਕਠੱਠੇ ਬਦਲਦੇ** ਹਨ (ਉਦਾ. `count` + `step` + `error`)। - Update ਤਰਕ ਕਾਫ਼ੀ ਪੁਸ਼ਟ ਹੈ ਕਿ ਤੁਸੀਂ ਇਸਨੂੰ handlers ਵਿੱਚ ਦੁਹਰਾ ਸਕਦੇ ਹੋ। ```jsx // instead of 4 separate useState + 6 setters, one reducer owns it all ``` ਬੋਨਸ: `dispatch` ਦੀ ਇੱਕ **stable identity** ਹੈ, ਇਸ ਲਈ ਇਸਨੂੰ context ਵਿੱਚ ਜਾਂ memoized ਬੱਚਿਆਂ ਨੂੰ ਭੇਜਣ ਨਾਲ re-renders ਨਹੀਂ ਹੁੰਦੇ। ਸਾਦੇ, ਸੁਤੰਤਰ ਮੁੱਲਾਂ ਲਈ, ਸਾਦਾ `useState` ਅਜੇ ਵੀ ਸਪਸ਼ਟ ਹੈ।