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 。