Redux: البرمجيات الوسيطة معطلة

حشرة

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

وهنا بعض الأمثلة:

// Make state aware of browser media queries
const mediaQueries = (mediaQueries = defaultMediaQueries): Middleware => store => {
  if (typeof window !== 'undefined') {
    const reverseMap = createReverseMap(mediaQueries)

    const handleMediaChange = ({media, matches}: MediaChangedActionPayload) =>
      store.dispatch(mediaChanged(reverseMap[media], matches))

    const addMatchListener = (media: string) => {
      const match = window.matchMedia(media)
      match.addListener(handleMediaChange)
      return match.matches
    }

    values(mediaQueries).forEach(media => 
      handleMediaChange({media, matches: addMatchListener(media)}))
  }

  return next => (action: any) => next(action)
}

مثال آخر:

// Make state aware of user adblockers
const adBlockDetection: Middleware = store => {
  if (typeof document !== 'undefined' && !document.getElementById('XMpADSwgbPUC')) {
    store.dispatch({type: AD_BLOCKER_DETECTED, payload: true})
  }
  return next => (action: any) => next(action)
}

مثال آخر:

// Make state aware of socket connectivity and allow synchronisation of actions
const socketMiddleware = ({actionCreator, url, dataSync}) => store => {
  const socket = new WebSocket(url.replace(/(http|https)/, 'ws'))

  socket.addEventListener('message', ({data}) => {
    store.dispatch(JSON.parse(data))
  })

  socket.addEventListener('open', () => {
    socket.send(syncCreator(CONNECT_TO_DOMAIN, store.getState(), null, socket))
    store.dispatch(actionCreator({connected: true}))
  })

  socket.addEventListener('close', reason => {
    store.dispatch(actionCreator({connected: false}))
  })

  return next => action => {
    if (dataSync.hasOwnProperty(action.type)) {
      socket.send(syncCreator(action.type, store.getState(), action.payload, socket))
    }
    return next(action)
  }
}

ما هو السلوك الحالي؟

تم طرح الخطأ التالي أثناء applyMiddleware ، بشكل أساسي كسر التطبيق:

Uncaught Error: Dispatching while constructing your middleware is not allowed. Other middleware would not be applied to this dispatch

إعادة هيكلة البرمجيات الوسيطة أعلاه التي سيتم إغلاقها بواسطة الوظيفة next => (كما هو موضح أدناه) لا تحدث فرقًا (ولكن من الواضح أنها ليست حلاً قابلاً للتطبيق أيضًا).

// Still broken:
const mediaQueries = (mediaQueries = defaultMediaQueries): Middleware => store => next => {
  // ...middlewareCodeGoesHere...
  return (action: any) => next(action)
}

ما هو السلوك المتوقع؟

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

ما هي إصدارات Redux والمتصفح ونظام التشغيل المتأثران بهذه المشكلة؟

عملت حتى هذا PR .