كيفية فهم المخفضات: يمكنك استخدامها بدون إعادة إحياء

TLDR: يمكنك التعامل مع الحالة باستخدام مخفض في مكونات الفئة الخاصة بك من خلال وجود وظيفة واحدة تترجم الإجراءات إلى تغييرات الحالة. إنه يمركز كل دول المجموعة الخاصة بك.

؟ ما هو المخفض؟

المخفضات هي وظائف تأخذ المدخلات وتقرر ما تفعله بها في مكان مركزي واحد. هذا هو. ؟

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

Redux Reducers ™ هي استخدام محدد للمخفضات التي تفسر الأحداث في تطبيقك ، وكيف يغير ذلك حالة التطبيق.

إذا لم تكن معتادًا على Redux ، فإن المثال أعلاه يبدأ عادةً من خلال استدعاء dispatchدالة مع action(كائن يصف حدثًا). ؟

يمكننا استخدام المخفضات الآن في مكون فئة عن طريق إنشاء وظيفة تتعامل مع ضبط الحالة من خلال نوع إجراء مثل:

استخدام المخفض في هذا المثال البسيط هو مبالغة في رأيي. أنا سعيد لردة الفعل سوف يتم توفير كل من useStateو useReducerربط لهذا السبب.

إذا لاحظت أنني كنت أقوم بتمرير طرق لتغيير الحالة ، countوأصبحت مقترنة ببعض خصائص الحالة الأخرى ، كنت سأنتقل إلى المخفض.

نظرًا لأن Redux يضع كل حالته في كائن واحد ينمو بسرعة ، فإنه يجعل نمط المخفض مناسبًا تمامًا. من الممكن إزالة المخفضات من Redux ، على الرغم من أننا قد نفقد الكثير من الميزات الرائعة.

يتيح لك Redux connectمتجرك العالمي لمكونك. يمكنك ترجمة الحالة إلى دعائم. كما أنها توفر dispatchوظيفة تؤدي إلى تشغيل مخفضات السرعة.

بدلاً من تمرير dispatchدالة ، دعنا نمرر updateدالة تعمل مثل setState.

؟ إنشاء نسخة أسوأ من Redux

عندما تتصل بالتحديث ، فأنت تقول بالضبط كيف يجب أن تتغير الحالة بشكل مضمّن. قد يكون أو لا يكون بجوار تغييرات الحالة المماثلة الأخرى.

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

حتى بدون تغيير الإعادة على الإطلاق ، يمكنك محاكاة هذا النمط. إرسال الإجراءات التي تبدو وكأنها SET_COUNTهي تلميحات نريدها حقًا فقط setState. إنه أمر سهل القيام به.

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

؟ المخفضات مفيدة لأكثر من الحالة

المخفضات طريقة رائعة لتوزيع القرارات. إذا كنت قد عملت مع جهاز التوجيه التفاعلي 4 من قبل ، فيجب أن يبدو الرمز أعلاه مألوفًا جدًا.

شكرا ل /> component, we can nest these route-view reducers anywhere.

Now if someone has the question “What are all the ways the URL can change what renders”, they have one central place to look.

? Summing It Up

  1. Reducers as a pattern exist outside of Redux and Javascript and are simple to implement. They have one single responsibility of taking input and giving output.
  2. Redux Reducers turn app events into state. You don’t need Redux to do this now, you can do it with local component state.
  3. Reducers make it easy to organize and find different variations of what can happen in the code and are useful as apps grow large.

If you have any questions or are looking for one-on-one React mentorship, feel free to tweet me @yurkaninryan any time!

If you like my writing style, here are some other articles that I’ve done.