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、どのブラウザとOSがこの問題の影響を受けますか？

このPRまで働いた。