Redux: मिडलवेयर टूट गया है

कीड़ा

एक महत्वपूर्ण मिडलवेयर पैटर्न टूट गया है। आईएमओ अधिकांश मिडलवेयर समाधान अपनी चिंताओं को समाहित करते हैं और अन्य मिडलवेयर के अस्तित्व से स्वतंत्र होते हैं। एक पैटर्न को तोड़ने के लिए हाल ही में एक बदलाव किया गया था, जो केवल मिडलवेयर के एक विशिष्ट सबसेट के लिए एक मामूली समस्या का कारण बना: वे जो 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 के कौन से संस्करण, और कौन से ब्राउज़र और OS इस समस्या से प्रभावित हैं?

इस पीआर तक काम किया।