ما هو Redux: كل ما تحتاج لمعرفته حول هذه المكتبة

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

دعونا نرى ما هو مثل ريدوكس!

ما هو جافا سكريبت؟

جافا سكريبت (JS)، هي لغة برمجة مفسرة. تعتبر لهجة من معايير ECMAScript وتتميز بكونها موجهة نحو الكائن، وقائم على النموذج الأولي، وضرورية، وضعيفة الكتابة، وديناميكية. على الرغم من اسمها، لا ينبغي الخلط بينها وبين جافا. يعتمد إنشائها على اعتبارات تجارية، بعد استحواذ Netscape Navigator (مبتكر LiveScript) على Sun Microsystems (مبتكرة Java) وتغيير اسم لغة البرمجة.

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

La يشبه بناء جملة JavaScript لغة مثل C++ وJava، على الرغم من أنها تتبنى أسماء واصطلاحات من جافا، ومن هنا اسمها. ولكن، كما ذكرت من قبل، من المهم ملاحظة أنه على الرغم من تشابه اسميهما، فإن Java وJavaScript لهما دلالات وأغراض مختلفة.

من ناحية أخرى، يجب أن نتذكر أن JavaScript يستخدم تطبيق نموذج كائن المستند (DOM)، وذلك JS هي لغة البرمجة الوحيدة التي تفهمها المتصفحات أصلاً. في البداية، تم استخدامه في صفحات ويب HTML للعمليات على العميل دون الوصول إلى الخادم. ومع ذلك، يتم استخدامه اليوم على نطاق واسع لإرسال واستقبال المعلومات من الخادم، غالبًا بالاشتراك مع تقنيات مثل AJAX. يتم تفسير JavaScript في وكيل المستخدم أثناء تنزيل البيانات مع كود HTML.

تطبيقات شبيبة

JavaScript هي لغة برمجة تستخدم على نطاق واسع في مجموعة متنوعة من التطبيقات والسياقات، مثل:

• تطوير الشبكة: إنه ضروري في تطوير الويب. يتم استخدامه لتحسين التفاعل وتجربة المستخدم على مواقع الويب وتطبيقات الويب. يتم استخدامه في إنشاء النماذج التفاعلية والمؤثرات المرئية والتحقق من صحة البيانات في الوقت الفعلي والتنقل الديناميكي وغيرها. موجود في:
  • الواجهة الأمامية للويب: إنه حجر الزاوية في تطوير الواجهة الأمامية. تعتمد الأطر والمكتبات مثل React وAngular وVue.js على JavaScript لإنشاء واجهات مستخدم تفاعلية وديناميكية في تطبيقات الويب.
  • الواجهة الخلفية للويب: من خلال منصات مثل Node.js، يتم استخدام JavaScript على جانب الخادم لإنشاء تطبيقات ويب كاملة. يتيح ذلك للمطور استخدام JavaScript في كل من الواجهة الأمامية والخلفية للتطبيق، مما يجعل من السهل مزامنة البيانات وإنشاء التطبيقات في الوقت الفعلي.
  • تطبيقات الخادم: على الرغم من أنها ليست شائعة مثل لغات الخادم الأخرى، يتم استخدام JavaScript في تطوير تطبيقات الخادم من خلال Node.js. يعد هذا مفيدًا بشكل خاص لتطبيقات الوقت الفعلي والتطبيقات التي تتعامل مع عدد كبير من الطلبات المتزامنة.
• تطبيقات الموبايل: يتم استخدامه في تطوير تطبيقات الهاتف المحمول الهجينة باستخدام أطر عمل مثل React Native وIonic. تسمح هذه الأطر للمطورين بالكتابة مرة واحدة وتشغيل التطبيق على منصات متعددة، مثل iOS وAndroid.
• ألعاب على الانترنت: يتم استخدامه في تطوير الألعاب عبر الإنترنت وألعاب المتصفح. تعمل المكتبات مثل Phaser وThree.js على تسهيل إنشاء ألعاب تفاعلية ثنائية وثلاثية الأبعاد في المتصفح.
• تطبيقات سطح المكتب: من خلال أدوات مثل Electron، من الممكن إنشاء تطبيقات سطح مكتب متعددة المنصات باستخدام تقنيات الويب مثل HTML وCSS وJavaScript.
• ملحقات المستعرض: لإضافة وظائف إضافية إلى متصفحات الويب، يتم استخدام الملحقات. عادةً ما تتم كتابة هذه الامتدادات بلغة JavaScript.
• تطبيقات إنترنت الأشياء (IoT): يتم استخدامه في تطوير التطبيقات والأنظمة الخاصة بأجهزة إنترنت الأشياء نظرًا لقدرته على التواصل مع الأجهزة وأجهزة الاستشعار من خلال واجهات برمجة التطبيقات والمكتبات المتخصصة.

ما هو ريدوكس وكيف يعمل؟

Redux هي مكتبة جافا سكريبت مفتوحة المصدر والتي تستخدم لإدارة الحالة في التطبيقات، وتتأثر بلغة Elm الوظيفية. غالبًا ما يتم دمجها مع مكتبات أخرى مثل React أو Angular لإنشاء واجهات المستخدم. لقد ابتكرها دان أبراموف وأندرو كلارك، الذين استلهموا من مكتبة الفيسبوك المسماة Flux.

بشكل عام، Redux عبارة عن مكتبة صغيرة تحتوي على ملف واجهة برمجة التطبيقات البسيطة والمحدودة، مصممة لتكون بمثابة حاوية يمكن التنبؤ بها لحالة التطبيق. عملها مشابه لمفهوم "التقليل" في البرمجة الوظيفية.

يعود تاريخ Redux إلى عام 2015، عندما بدأ دان أبراموف في تطوير الإصدار الأول من Redux أثناء الاستعداد لإلقاء محاضرة في مؤتمر React Europe حول Hot Reloading. خلال هذه العملية، لاحظ أبراموف التشابه بين نمط التدفق ووظيفة المخفض. قادته هذه الملاحظة إلى التساؤل عما إذا كان متجر Flux يمكن أن يكون في الواقع وظيفة تصغير.

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

العلاقة بين Redux وReact: ما هو React

React هي مكتبة جافا سكريبت الذي يركز على إنشاء واجهات المستخدم، على الرغم من أن تعدد استخداماته يتجاوز هذا التعريف. هذه الأداة، التي طورتها شركة فيسبوك في البداية، هي مفتوحة المصدر وتستخدم على نطاق واسع نظرًا لقدرتها على إنشاء واجهات مستخدم بسرعة في مجموعة متنوعة من التطبيقات، بما في ذلك تطبيقات الويب ذات الصفحة الواحدة (SPA) وتطبيقات Android وiOS.

على عكس الأطر الأخرى، مثل Angular، التي تقدم أساليب أكثر تعقيدًا، فإن React كذلك تتميز بقدرتها على إنشاء واجهات المستخدم بكفاءة. يتم تحقيق ذلك من خلال استخدام ملفات .jsx، التي تجمع بين المنطق وواجهة المستخدم في ملف واحد ويتم تنظيمها في وحدات تسمى المكونات.

DOM الافتراضي: ما هو؟

عندما نتعمق في عالم ReactJS، ربما نسمع كثيرًا عن مفهوم DOM الظاهري. نشأت هذه الفكرة من فكرة بارعة: بدلاً من تحديث DOM الفعلي بالكامل، نقوم فقط بتعديل الجزء الذي يحتاج إلى تغييرات بالفعل. في تطبيقات JavaScript القديمة، كنا نتلقى البيانات بتنسيق JSON من الخادم ثم نقوم بإنشاء HTML جديد كامل لعرضه، مما يؤدي إلى تحديث الصفحة بأكملها عند كل تعديل.

كيفية تثبيت وتكوين Redux في مشروعك

إذا كنت تريد أن تعرف كيفية تثبيت ريدوكسوالحقيقة هي أن الأمر ليس معقدًا على الإطلاق. للقيام بذلك يجب عليك الذهاب إلى المحطة ومن هناك يجب عليك تنفيذ الأمر التالي:

npm i-S ريدوكس

الآن لديك الإصدار الثابت من Redux المثبت على نظامك. بالطبع، ربما ستحتاج إلى حل بعض التبعيات، مثل تثبيت npm، مدير الحزم Node.js. بمجرد الانتهاء من ذلك، سنقوم الآن بتثبيت React، والذي ستحتاج إليه أيضًا للاستفادة من Redux، بالإضافة إلى أدوات التطوير لتتمكن من البدء في إنشاء مشاريعك.

لتثبيت هذه الحزم الأخرى، الأوامر التي يجب عليك تنفيذها هي:

npm i -S رد فعل الإرجاع npm i -D أدوات الإرجاع

الآن سيكون لديك كل شيء جاهز للبدء. إذا ذهبت إلى المجلد الرئيسي أو الدليل حيث تم تثبيت Redux، فسترى أن هناك العديد من الدلائل الفرعية أو المجلدات الفرعية، مثل STORE وREDUCERS وACTIONS وTYPES. يجب أن تعرف ما هو كل واحد:

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

مثال عملي: إنشاء تطبيق باستخدام Redux

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

// استيراد مكتبات Redux import { createStore } from 'redux'; // تحديد الإجراءات const incrementAction = { type: 'INCREMENT' }; const decrementAction = { type: 'DECREMENT' }; // تحديد المخفض const counterReducer = (state = 0, action) => { Switch (action.type) { case 'INCREMENT': return State + 1; الحالة "DECREMENT": حالة الإرجاع - 1؛ الافتراضي: حالة الإرجاع؛ } }; // إنشاء متجر Redux const store = createStore(counterReducer); // اشترك في التغييرات في المتجر store.subscribe(() => { console.log('حالة العداد الحالية:', store.getState()); }); // إجراءات الإرسال لتعديل الحالة store.dispatch(incrementAction); store.dispatch(incrementAction); store.dispatch(decrementAction);

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