متى تستخدم useReducer بدلاً من useState؟

Question

Accepted Answer

`useReducer` يركز انتقالات الحالة في دالة **reducer نقية** واحدة، بدلاً من توزيع العديد من `useState` setters. إنها نسخة React المدمجة من نمط Redux. ```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 ; } ``` ## كيفية العمل تقوم بـ `dispatch` **إجراء** (كائن عادي يصف حدثاً). يستدعي React `reducer(currentState, action)` ويستخدم الكائن المُرجع كحالة جديدة. الـ reducer **نقي** (بدون آثار جانبية، بدون طفرات)، مما يجعل المنطق قابلاً للتنبؤ وقابلاً للاختبار الوحدوي بشكل معزول. ## متى تفضله على useState - الحالة التالية **تعتمد على الحالة السابقة** بطرق غير بديهية. - عدة قيم **تتغير معاً** (مثل `count` + `step` + `error`). - منطق التحديث معقد بما يكفي بحيث تكرره عبر معالجات مختلفة. ```jsx // instead of 4 separate useState + 6 setters, one reducer owns it all ``` إضافة: `dispatch` له **هوية مستقرة**، لذا فإن تمريره عبر context أو للأطفال المذاكرين لا يسبب إعادة رندر. بالنسبة للقيم البسيطة والمستقلة، `useState` العادي لا يزال أكثر وضوحاً.