reactjs - ما يمكن أن يكون سلبيات استخدام Redux بدلا من تدفق




3 Answers

Redux مؤلف هنا!

أود أن أقول إنك ستقوم بتقديم التنازلات التالية باستخدامها:

  • سوف تحتاج إلى تعلم لتجنب الطفرات. لا يتم تحريك Flux عن تدفق البيانات ، ولكن Redux لا يحب الطفرات والعديد من الحزم التكميلية لـ Redux تفترض أنك لا تتحور الدولة أبداً. يمكنك فرض هذا باستخدام حزم dev-only مثل redux-immutable-state-invariant ، أو استخدم Immutable.js ، أو ثق بنفسك وفريقك لكتابة كود غير متحرك ، ولكنه شيء تحتاج إلى معرفته ، وهذا يحتاج إلى كن قرارًا واعًا مقبولاً من قبل فريقك.

  • سيكون عليك اختيار حزمك بعناية. على الرغم من أن Flux لا يحاول بشكل صريح حل المشاكل "القريبة" مثل undo/redo ، أو persistence ، أو forms ، فإن Redux لديه نقاط امتداد مثل الوسيطة ومحسنات المتجر ، وقد أنتج نظامًا بيئيًا شابًا لكنه غني . وهذا يعني أن معظم الحزم هي أفكار جديدة ولم تتلق بعد الكتلة الحرجة من الاستخدام. قد تعتمد على شيء من شأنه أن يكون فكرة سيئة بشكل واضح بعد بضعة أشهر ، ولكن من الصعب أن نقول فقط حتى الآن.

  • لن يكون لديك تكامل تدفق جيد حتى الآن. يتيح لك Flux حاليًا إجراء فحوصات ثابتة للغاية من النوع الثابت والتي لا تدعمها Redux حتى الآن . سنصل إلى هناك ، لكن الأمر سيستغرق بعض الوقت.

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

انظر أيضا جوابي على upsides استخدام Redux .

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




واحدة من أكبر الفوائد في استخدام 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




Related

reactjs redux flux reactjs-flux