هل يجب علي استخدام المخفض؟ – نصائح مدونة فاخرة

أنا أتعلم React لتطوير ملحقات WordPress الخاصة بي. أنا تعلمت عن useReducer ربط مؤخرًا. شعرت بالارتباك حيال استخدامه useState و useReducer. لذلك سألت على Reddit. والمثير للدهشة أن السؤال حصل على الكثير من الأصوات والتعليقات! وهناك العديد من النصائح المفيدة التي أود تلخيصها في هذا المنشور.

الجزء المربك

هذا مثال من مستندات React الجديدة (أزلت بعض الأجزاء لإبراز وجهة النظر):

function tasksReducer(draft, action) {
  switch (action.type) {
    case 'added': {
      // ...
    }
    case 'changed': {
      // ...
    }
    case 'deleted': {
      // ...
    }
  }
}

export default function TaskApp() {
  const [tasks, dispatch] = useImmerReducer(tasksReducer, initialTasks);

  function handleAddTask(text) {
    dispatch({type: 'added', id: nextId++, text});
  }

  function handleChangeTask(task) {
    dispatch({type: 'changed', task});
  }

  function handleDeleteTask(taskId) {
    dispatch({type: 'deleted', id: taskId});
  }

  return (
    <>
      <AddTask onAddTask={handleAddTask} />
      <TaskList tasks={tasks} onChangeTask={handleChangeTask} onDeleteTask={handleDeleteTask} />
    </>
  );
}

كان ارتباكي هو تكرار الكود الذي يتعامل مع الإجراء في المخفض ومعالجات الأحداث. شعرت أنهم جزء واحد لكنهم مقسمون إلى قسمين. لذلك سألت هل هناك طريقة للقيام بعمل أفضل، أو على وجه التحديد متى يجب علي استخدام Reducer؟

دعنا نلقي نظرة على الردود:

مزايا useReducer

أشارت بعض التعليقات إلى أن القضية أعلاه هي ليس ازدواجية.

أرى قلقك ، فهو ليس تكرارًا في رأيي. وإذا بدا أنه يمثل مشكلة ، يمكنك ببساطة إرجاع طريقة الإرسال و التعامل مع إرسال الإجراءات في المكون نفسه. بغض النظر عن ذلك الآن سوف تكون تنفيذ هذا المنطق في المكونات.

lca_tejas

لذلك ، يمكن تحسين الكود ببساطة استدعاء dispatch تعمل داخل المكون، بدون إنشاء وظائف معالج الأحداث. ولكن بعد ذلك يتم تنفيذ المنطق في المكونات (وهي ليست علامة جيدة).

إليك نسخة جديدة من الكود توضح هذه الفكرة:

export default function TaskApp() {
  const [tasks, dispatch] = useImmerReducer(tasksReducer, initialTasks);

  return (
    <>
      <AddTask onAddTask={text => dispatch({type: 'added', id: nextId++, text})} />
      <TaskList 
        tasks={tasks} 
        onChangeTask={task => dispatch({type: 'changed', task})}
        onDeleteTask={taskId => dispatch({type: 'deleted', id: taskId})}
      />
    </>
  );
}

بعد التكرار ، هناك تعليق رائع آخر هو:

هذا ليس تكرارًا في الواقع ولكنه مستوى إضافي من التجريد (لا تقوم إجراءات إرسال التبديل والمعالجات بنفس العملية ، بل تقوم بخطوات مختلفة للعملية). هذه يقلل الاقتران بين إدارة الدولة والمكونات، وهو أمر جيد بشكل عام. لكن المستوى الإضافي من التجريد يزيد من تعقيد التعليمات البرمجية ، لذلك عليك القيام بذلك التوازن بين البساطة والنقاء.

artyhedgehog

يسلط هذا التعليق الضوء على نقطة مهمة للغاية وهي استخدام المخفضات يستخرج المنطق (في وظيفة المخفض) و يفصل بين إدارة الدولة ومكوناتها. أعتقد أن هذا هو العامل الأكثر أهمية عندما نفكر في استخدام مخفضات السرعة.

بالإضافة إلى ذلك ، باستخدام مخفضات يساعد على اختبار أسهل كما أشارت siren1313:

المخفض ل دولة واحدة ربما تكون مبالغة وغير ضرورية إلا إذا كنت ترغب في ذلك استخراج منطق الحالة بحيث يصبح الاختبار أسهل.

صفارات الانذار 1313

لذا ، متى تستخدم المخفض؟

هناك العديد من التعليقات الجيدة على متى لاستخدام المخفضات مقابل حالات الاستخدام. يتفق معظمهم على أن المخفضات مفيدة جدًا عندما التعامل مع العديد من الدول التي تعتمد على بعضها البعض.

عادة ، أستخدم useReducer عندما يكون لدي دول متعددة تتغير في نفس الوقت أو تعتمد على بعضها البعض.

اندريه 9669

استخدم المخفض بشكل أساسي لتجنب أي موقف حيث يمكن أن يكون لديك عدة مكالمات useState متتالية.

صفارات الانذار 1313

شرح فيديو تعليمي من بن عوض هذا جيدًا:

https://www.youtube.com/watch؟v=wcRawY6aJaw

نصائح حول استخدام المخفضات

لقد وجدت مقتطفًا رائعًا جدًا useReducer لجعل الشفرة أقصر وأوضح من useState من مستخدم Reddit الجديد:

const [onOrOff, toggle] = useReducer(onOrOff => !onOrOff, false);
const [count, increment] = useReducer(count => count + 1, 0);
return (
  <div>
    <button onClick=toggle>{onOrOff}</button>
    <button onClick=increment>{count}</button>
  </div>
)

هناك لا يوجد كائن عمل في المخفض وظيفة. وظيفة المخفض يعود ببساطة دولة جديدة!

مقتطف لطيف آخر هو تعيين حالة التحميل (من مستخدم Reddit quote_engine):

// When you only need to call the setter once during a component lifecycle and it'll always start out as false
const [isLoaded, onLoad] = useReducer(() => true, false);

أو شخص آخر (من نفس المستخدم):

// If you want a setState but it acts as setFalse when no args are passed. Great for isOpen/onClose patterns 
const [isOpen, setIsOpen] = useReducer((state, action) => Boolean(action), false);