😱 📺 🍡 Redux vs MobX بدون ارتباك 👬 👩‍👦 👩🏿‍⚕️

في السنوات الأخيرة ، غالبًا ما استخدمت Redux ، لكني أستخدم مؤخرًا MobX كبديل لإدارة الدولة. يبدو أن بدائل Redux تتحول بشكل طبيعي إلى فوضى. الناس ليسوا متأكدين من الحل الذي يختارونه. المشكلة ليست بالضرورة Redux vs MobX. عندما يكون هناك بديل ، يتساءل الناس عن أفضل طريقة لحل مشكلتهم. أنا أكتب هذه السطور للقضاء على الارتباك حول حلول إدارة حالة Redux و MobX.

عن ماذا ستكون هذه المقالة؟ أولاً ، أود أن أعود بإيجاز إلى المشكلة التي تحلها مكتبة إدارة الدولة. في النهاية ، سيكون كل شيء على ما يرام إذا كنت تستخدم this.setState () و this.state في React أو اختلافه في مكتبة أخرى على مستوى العرض التقديمي أو في بيئة SPA. ثانيًا ، سأستمر في إعطائك نظرة عامة على كلا الحلين ، مع إظهار الاتساق والاختلاف. وأخيرًا وليس آخرًا ، إذا كان لديك بالفعل تطبيق يعمل مع MobX أو Redux ، أريد أن أخبرك عن إعادة الهيكلة من مكتبة ولاية إلى أخرى.

المحتوى:

ما المشكلة التي نحلها؟

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

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

يجب أن يشارك مكون الحالة مع مكون آخر
يجب أن يعدل المكون حالة مكون آخر

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

الحل إذن هو تقديم مكتبة إدارة الدولة مثل MobX أو Redux. يمنحك أدوات لحفظ حالتك ، وتغيير حالتها ، وتلقي تحديثات الحالة. لديك مكان واحد للبحث ، ومكان واحد للتغيير ، ومكان واحد لتلقي تحديثات الحالة. إنه يتبع مبدأ مصدر واحد للحقيقة.. هذا يجعل من السهل التفكير في التغييرات في حالتك وظروفك ، لأنها منفصلة عن مكوناتك.

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

ما الفرق بين REDUX و MOBX؟

قبل أن نتعمق في الاختلاف ، أريد أن أخبرك عن أوجه التشابه بين MobX و Redux.

يتم استخدام كلتا المكتبتين للتحكم في الحالة في تطبيقات JavaScript. لا ترتبط بالضرورة بمكتبة مثل Angular. كما أنها تستخدم في مكتبات أخرى مثل ReactJs و VueJs.

إذا اخترت أحد حلول إدارة الولاية ، فلن تواجه أي تأمين للمورد. يمكنك التبديل إلى حل آخر لإدارة الدولة في أي وقت. يمكنك الترقية من MobX إلى Redux أو من Redux إلى MobX. في وقت لاحق سأريكم كيف يحدث هذا.

Redux الذي صممه Dan Abramov و Andrew Clark مشتق من بنية Flux. على عكس Flux ، يستخدم مستودع واحد على عدة للحفاظ على الحالة. بالإضافة إلى ذلك ، بدلاً من المرسل ، يستخدم وظائف نقية لتغيير الحالة. إذا لم تكن على دراية بالتدفق وكنت جديدًا في إدارة الولاية ، فلا تقلق بشأن الفقرة الأخيرة.

يتأثر Redux بمبادئ البرمجة الوظيفية (FP). يمكن تنفيذ FP في JavaScript ، لكن الكثير من الناس يأتون من خلفية موجهة للكائنات ، مثل Java ، ويجدون صعوبة في قبول مبادئ البرمجة الوظيفية في المقام الأول. يوضح هذا لاحقًا سبب سهولة تعلم MobX كمبتدئ.

نظرًا لأن Redux يتضمن برمجة وظيفية ، فإنه يستخدم وظائف نقية .

الوظيفة النقية هي وظيفة تستقبل المدخلات ، وتعيد الإخراج ، وليس لها تبعيات أخرى بخلاف نفس الوظائف. تنتج هذه الوظيفة دائمًا نفس الناتج مع نفس المدخلات وليس لها أي آثار جانبية. المزيد من التفاصيل

(state, action) => newState

حالة Redux الخاصة بك لم تتغير . بدلاً من التحوّل ، تعود دومًا دولة جديدة. لا تقوم بإجراء طفرات في الحالة ولا تعتمد على مراجع الكائن.


//     Redux,     
function addAuthor(state, action) {
  return state.authors.push(action.author);
}
//       
function addAuthor(state, action) {
  return [ ...state.authors, action.author ];
}

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

{
  post: {
    id: 'a',
    authorId: 'b',
    ...
  },
  author: {
    id: 'b',
    postIds: ['a', ...],
    ...
  }
}

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

في Mobx ، حالتك متقلبة . بهذه الطريقة تقوم بتغيير الدولة مباشرة:

function addAuthor(author) {
  this.authors.push(author);
}

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

{
  post: {
    id: 'a',
    ...
    author: {
      id: 'b',
      ...
    }
  }
}

مستودع واحد مقابل عدة

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

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

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

كيف يبدو التنفيذ؟

في Redux ، تتطلب إضافة تكوين تطبيق إلى حالة عمومية أسطر التعليمات البرمجية التالية.

const initialState = {
  users: [
    {
      name: 'Alex'
    },
    {
      name: 'Nik'
    }
  ]
};
// reducer
function users(state = initialState, action) {
  switch (action.type) {
  case 'USER_ADD':
    return { ...state, users: [ ...state.users, action.user ] };
  default:
    return state;
  }
}
// action
{ type: 'USER_ADD', user: user };

في MobX ، سيدير التخزين الحالة الفرعية فقط (حيث يتحكم المخفض في Redux في الحالة الفرعية) ، ولكن يمكنك تغيير الحالة مباشرة. تسمح لك التعليقات التوضيحية التي يمكن ملاحظتها @ بمراقبة تغييرات الحالة.

class userStore{
@observable users = [
    {
      name: 'Nikita'
    }
  ];
}

الآن يمكنك الاتصال بـ userStore.users.push (مستخدم) ؛ على نسخة المتجر. ومع ذلك ، فمن المستحسن أن تكون طفرات الدولة أكثر وضوحا من خلال العمل.

class userStore{
@observable users = [
    {
      name: 'Nikita'
    }
  ];
}
@action addUser = (user) => {
    this.users.push(user);
  }

يمكنك تطبيقه بدقة من خلال تكوين MobX مع التكوين ({empceActions: true}) ؛. الآن يمكنك تغيير حالتك عن طريق استدعاء userStore.addUser (مستخدم) ؛ على نسخة المتجر.

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

تفاعل منحنى تعلم الحالة

يستخدم كل من Redux و MobX بشكل أساسي في تطبيقات التفاعل. ولكن هذه مكتبات إدارة حالة مستقلة يمكن استخدامها في كل مكان دون رد فعل. مكتبات التفاعل الخاصة بها تجعل من السهل دمجها مع المكونات الزاويّة. هذه هي رد فعل رد فعل لـ React + Redux و mobx-React لـ React + MobX . سأشرح لاحقًا كيفية استخدام كليهما في شجرة المكون الزاوي.

في المناقشات الأخيرة ، حدث أن جادل الناس حول منحنى التعلم في Redux. غالبًا ما حدث هذا في سياق React: بدأ الناس في تعلم React وأرادوا بالفعل استخدام إدارة الدولة مع Redux. يدعي معظم الناس أن React و Redux لديهما منحنى تعليمي جيد ، ولكن كلاهما يمكن أن يكون مربكًا. لذلك ، سيكون MobX بديلاً ، لأنه مناسب أكثر للمبتدئين.

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

Redux أو MobX للمبتدئين؟

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

— , JavaScript. , , - , , MobX.

Redux

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

يوفر لك Redux بنية كاملة لإدارة الحالة مع قيود واضحة. قصة نجاح Redux .

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

MobX أقل ثقة بالنفس ، ولكن مع التهيئة ({empceActions: true}) يمكنك تطبيق قيود أكثر دقة ، كما هو الحال في Redux. لهذا السبب لن أقول أنه لا يمكنك استخدام MobX لتوسيع التطبيقات ، ولكن لدى Redux طريقة واضحة للقيام بشيء ما. حتى أن وثائق MobX تقول: " [MobX] لا يخبرك بكيفية هيكلة التعليمات البرمجية الخاصة بك ، ومكان تخزين الحالة ، أو كيفية التعامل مع الأحداث ." سيتعين على فريق التطوير أولاً إنشاء بنية إدارة الدولة.

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

الأفكار الأخيرة

كلما قرأت التعليقات في مناقشة Redux vs MobX ، كان هناك دائمًا تعليق واحد: " Redux لديه الكثير من المعايير ، يجب عليك استخدام MobX بدلاً من ذلك. تمكنت من حذف XXX من أسطر التعليمات البرمجية ". قد يكون التعليق صحيحًا ، ولكن لا أحد يعتبر تسوية. يأتي Redux مع الكثير من القوالب مثل MobX لأنه تمت إضافته لقيود التصميم المحددة. هذا يسمح لك بالتفكير في حالة تطبيقك ، حتى لو كان على نطاق أوسع. الحفل كله المرتبط بمعاملة الدولة ، ليس فقط.

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

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

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

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

المكتبتان عظيمتان. على الرغم من أن Redux راسخ بالفعل ، إلا أن MobX أصبح بديلاً قابلاً للتطبيق لإدارة الدولة.

Redux vs MobX بدون ارتباك