مقدمة ل Redux-Logic

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

تفترض هذه المقالة أن لديك فهمًا جيدًا لـ React و Redux.

تحديث سريع حول Redux

Redux هو حاوية حالة لتطبيقات JavaScript ويستخدم بشكل شائع مع React. يوفر مكانًا مركزيًا لتخزين البيانات المستخدمة عبر تطبيقك. يوفر Redux أيضًا إطارًا لعمل طفرات حالة يمكن التنبؤ بها . يؤدي استخدام Redux إلى تسهيل كتابة التطبيقات الديناميكية والقائمة على البيانات وفهمها وتصحيحها وتوسيع نطاقها.

في Redux ، تستدعي المكونات منشئي الإجراءات الذين يرسلون الإجراءات . الإجراءات (عادة!) كائنات صغيرة بسيطة تعبر عن نية أو تعليمات. يمكن أن تحتوي الإجراءات أيضًا على "حمولات" (أي بيانات).

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

لماذا الحاجة إلى Redux Logic؟

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

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

بعد استكشاف الخيارات المختلفة ، كنت أستخدم Redux-Logic في مجموعة متنوعة من المشاريع منذ فترة حتى الآن ووجدتها رائعة!

دورة حياة إعادة المنطق

يوفر Redux-Logic برمجية وسيطة تقوم ببعض المعالجة بين وقت إرسال إجراء من أحد المكونات وعندما يصل الإجراء إلى مخفض.

نستخدم مكتبة redux-logic لإنشاء "المنطق". هذه هي في الأساس وظائف تعترض إجراءات كائن عادي معينة ، وتنفذ معالجة غير متزامنة ثم ترسل إجراءً آخر عاديًا . وظائف المنطق إيضاحية ومرنة حقًا ، كما سنرى!

الشيء المهم الذي يجب استبعاده هنا هو أن جميع الإجراءات التي يعمل معها Redux-Logic هي أشياء بسيطة . سيكون الإجراء الذي يتم إرساله بواسطة مكون واجهة المستخدم والإجراء الذي يتم إرساله بعد ذلك بواسطة المنطق دائمًا كائنًا عاديًا (على عكس ، على سبيل المثال ، وظيفة). سوف نعيد النظر في هذا أدناه عندما نقارن خيارات مختلفة من البرامج الوسيطة.

تحت الغطاء ، يستخدم Redux-Logic البرمجة التفاعلية "القابلة للملاحظة". اقرأ المزيد عن ذلك هنا.

تدفق البيانات

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

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

يمكنك أن ترى كيف تعمل البرامج الوسيطة بين وقت إرسال أحد الإجراءات وعندما يتم التعامل معه بواسطة مخفض.

الاختلافات الرئيسية عن الحلول الأخرى

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

علاوة على ذلك ، أعتقد أن نهج "الكائن العادي" للتعامل مع السلوك غير المتزامن يتناسب بشكل طبيعي مع بقية بنية Redux (المتزامنة) ، مما يجعل هذه البرامج الوسيطة مناسبة بشكل عضوي مع Redux.

برمجيات Redux الوسيطة الشهيرة الأخرى هي Redux-Saga . لقد وجدت منحنى التعلم للحصول على رأسي حول الملاحم (ميزة ES6 جديدة نسبيًا) شديد الانحدار عندما نظرت إلى هذا الخيار. سيتضاعف هذا إذا كنت تريد إدخال هذه المكتبة في تطبيق يديره فريق يضم عدة أشخاص. بالإضافة إلى ذلك ، أعتقد أنه إذا لم تتم إدارتها بشكل جيد ، فيمكن للقصص إنشاء رمز معقد المظهر مقارنة بالمنطق الذي تقوم بإنشائه باستخدام منطق إعادة التشغيل. يمكن أن يؤثر ذلك على سرعة التطوير وقابلية صيانة الكود.

نظرة عامة على المثال

فيما يلي مقتطفات بسيطة من تطبيق React بسيط يمكنه جلب أحوال الطقس الحالية في المدينة وتقديمها للمستخدم. يستخدم المثال Redux-Logic لدعم السلوك غير المتزامن لجلب البيانات باستخدام واجهة برمجة تطبيقات OpenWeatherMap مجانية.

للمقارنة ، قمت بتضمين عملية Redux متزامنة تعرض عدد الطلبات التي قام بها المستخدم.

هنا هو شفرة المصدر.

تهيئة البيئة التنموية

هذه هي الأوامر التي قمت بتشغيلها لبدء إنشاء تطبيقي:

npx create-react-app appnpm install --save reduxnpm install --save react-reduxnpm install --save redux-logicnpm install --save axios

ولرؤية التطبيق:

npm start

سعيد لأنني تمكنت من رؤية الصفحة الرئيسية الافتراضية لتطبيق Create React على localhost: 3000 ، ثم بدأت في كتابة بعض التعليمات البرمجية!

فيما يلي مقتطفات التعليمات البرمجية التي توضح النقاط المهمة حول دمج Redux-Logic في المشروع.

إضافة برمجيات وسيطة إلى متجر Redux الخاص بنا

في appStore.js ، إذا لم نستخدم أي برمجيات وسيطة ، فعادة ما نوفر فقط مخفض الجذر الخاص بنا إلى طريقة createStore. هذا هو المكان الذي نربط فيه البرامج الوسيطة Redux-Logic ببقية تطبيقنا.

نحدد أننا نريد استخدام المحاور كعميل لعمل طلبات HTTP.

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

إرسال الإجراءات غير المتزامنة

باستخدام Redux-Logic ، يتم إرسال الإجراءات التي تؤدي إلى سلوك غير متزامن بنفس طريقة الإجراءات التي تؤدي إلى تشغيل تحديثات الحالة المتزامنة. لا يوجد شيء مختلف!

للتأكد من اكتمالها ، يمكنك أن ترى أدناه أنه عندما ينقر المستخدم على زر ، فإننا نطلق على منشئ الإجراء الذي تم تمريره إلى مكوننا كدعامات.

اعتراض الإجراءات غير المتزامنة

هذا هو المكان الذي نرى فيه ظهور البرمجيات الوسيطة لمنطق إعادة التشغيل. نحن نستخدم مكتبة redux-logic لإنشاء بعض "المنطق" الذي سيعترض إجراءات محددة.

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

بعد ذلك نحدد أنه عندما تعود العملية غير المتزامنة ، نرسل على الفور أحد الإجراءين. إذا عاد الوعد بنجاح ، فإننا نرجع إجراء GET_WEATHER_FOR_CITY_SUCCESSFUL . هذا ما نريده!

بدلاً من ذلك ، إذا تم رفض الوعد الذي تم إرجاعه ، فنحن نرسل GET_WEATHER_FOR_CITY_FAILURE .

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

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

معالجة الإجراءات غير المتزامنة

يمكنك أن ترى من مخفض weatherDataHandling.js أن الإجراءات المرسلة من منطقنا يتم التعامل معها كإجراءات كائن عادي. المخفضات تحور الحالة بنفس الطريقة كما هو الحال مع الإجراءات المتزامنة . لذا فإن لقطة الشاشة أدناه هي ما تتوقعه من العمل مع Redux من قبل. ممتاز!

ملخص

Redux هي حاوية حالة شائعة يمكن التنبؤ بها لتطبيقات JavaScript. بشكل افتراضي ، تدعم جميع إجراءات Redux السلوك المتزامن فقط ، وستحتاج إلى نوع من الحلول الوسيطة للسلوك غير المتزامن.

يوفر مسترجع-المنطق و اضحة و قوية الوسيطة التي تسمح لك لاستخدام الإجراءات غير متزامن في تطبيق مسترجع الخاص بك. يمكنك إضافة البرامج الوسيطة إلى متجر Redux الخاص بك للسماح لتطبيقك باستخدام Redux-Logic يمكنك استخدام مكتبة redux-logic لإنشاء المنطق الذي يعترض إجراءات معينة ويرسل المزيد من الإجراءات بعد اكتمال بعض المعالجة غير المتزامنة (مثل جلب البيانات من واجهة برمجة التطبيقات).

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

شكرًا على القراءة ، أرحب بأي تعليقات أو أسئلة أدناه!