reactjs - ماذا يمكن أن يكون سلبيات استخدام Redux بدلاً من Flux




reactjs-flux (5)

Flux Redux . . .

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

Redux تدعم مفهومًا immutable .

لماذا الثبات؟

هناك أسباب قليلة لذلك:
1. التماسك - يتم دائمًا تغيير حالة المتجر عن طريق المخفض ، لذلك من السهل تتبع من يغير ما.
2. الأداء - نظرًا لأنه غير قابل للتغيير ، لا تحتاج Redux إلا إلى التحقق مما إذا كانت الحالة السابقة! == الحالة الحالية وإذا كان الأمر كذلك. لا حاجة لتكرار الحالة في كل مرة لتصميمها.
3. تصحيح الأخطاء - مفاهيم جديدة رائعة مثل Time Travel Debugging و Hot Reloading .

استكمال: إذا لم يكن ذلك مقنعًا ، شاهد Lee Byron حديثًا ممتازًا عن واجهات المستخدم غير القابلة للتغيير .

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

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

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

لقد اكتشفت مؤخرا Redux . كل شيء يبدو جيدا. هل هناك أي سلبيات ، مسكتك أو تنازلات لاستخدام Redux على Flux؟ شكر


أفضل استخدام Redux لأنه يستخدم متجرًا واحدًا مما يجعل إدارة الحالة أسهل مقارنةً بـ Flux ، وأيضًا Redux DevTools هي أدوات مفيدة حقًا تتيح لك رؤية ما تفعله مع ولايتك ببعض البيانات المفيدة وتتوافق مع أدوات React النامية.

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

لدى Redux ثلاثة مبادئ يمكن أن تقدم Redux جيدًا وهي الفرق الرئيسي بين Redux و Flux أيضًا.

مصدر واحد للحقيقة

يتم تخزين حالة التطبيق بالكامل في شجرة كائن داخل متجر واحد.

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

console.log(store.getState())

/* Prints
{
  visibilityFilter: 'SHOW_ALL',
  todos: [
    {
      text: 'Consider using Redux',
      completed: true,
    },
    {
      text: 'Keep all state in a single tree',
      completed: false
    }
  ]
}
*/

الدولة للقراءة فقط

إن الطريقة الوحيدة لتغيير الحالة هي إرسال إجراء ما ، وهو كائن يصف ما حدث.

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

store.dispatch({
  type: 'COMPLETE_TODO',
  index: 1
})

store.dispatch({
  type: 'SET_VISIBILITY_FILTER',
  filter: 'SHOW_COMPLETED'
})

يتم إجراء تغييرات مع وظائف نقية

لتحديد كيفية تحويل شجرة الحالة من خلال الإجراءات ، يمكنك كتابة مخفضات نقية.

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

function visibilityFilter(state = 'SHOW_ALL', action) {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter
    default:
      return state
  }
}

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    case 'COMPLETE_TODO':
      return state.map((todo, index) => {
        if (index === action.index) {
          return Object.assign({}, todo, {
            completed: true
          })
        }
        return todo
      })
    default:
      return state
  }
}

import { combineReducers, createStore } from 'redux'
let reducer = combineReducers({ visibilityFilter, todos })
let store = createStore(reducer)

لمزيد من المعلومات زيارة here


الإعادة تتطلب الانضباط فيما يتعلق بعدم الثبات. شيء يمكنني أن أوصي به هو ng-freeze لإعلامك بأي طفرة حالة عرضية.


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


يتطلب كل من Redux و Flux مقدارًا كبيرًا من كود النمطي لتغطية العديد من الأنماط الشائعة ، خاصة تلك التي تتضمن جلب البيانات غير المتزامنة. تحتوي وثائق Redux بالفعل على عدد قليل من الأمثلة لتخفيض النمطي: http://redux.js.org/docs/recipes/ReducingBoilerplate.html . يمكنك الحصول على كل ما قد تحتاجه من مكتبة Flux مثل Alt أو Fluxxor ، لكن Redux يفضل الحرية على الميزات. قد يكون هذا جانبًا سلبيًا لبعض المطورين لأن Redux يقدم بعض الافتراضات حول حالتك التي قد يتم تجاهلها عن غير قصد.

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

إخلاء المسئولية: لقد قمتُ بالترحيل من Flummox (أحد تطبيقات Flux الشائعة) إلى Redux والانتفاخات تفوق أي جوانب سلبية. أنا أفضل بكثير السحر في التعليمات البرمجية الخاصة بي. أقل سحر يأتي بتكلفة أكثر من ذلك بقليل ، لكنه ثمن ضئيل للغاية يجب دفعه.





reactjs-flux