Redux: Le middleware est cassé

Bogue

Un important modèle de middleware a été rompu. OMI, la majorité des solutions middleware encapsulent leurs propres préoccupations et sont indépendantes de l'existence d'autres middleware. Une modification a été apportée récemment pour casser un modèle qui ne causait qu'un problème mineur pour un sous-ensemble spécifique de middleware : ceux qui présentent un comportement différent lors de l'interaction avec d'autres middleware pendant le chemin d'initialisation applyMiddleware .

Voici quelques exemples:

// 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)
}

Un autre exemple:

// 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)
}

Un autre exemple:

// 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)
  }
}

Quel est le comportement actuel ?

L'erreur suivante est générée pendant applyMiddleware , ce qui interrompt essentiellement l'application :

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

Refactoriser le middleware ci-dessus pour qu'il soit fermé par la fonction next => (comme ci-dessous) ne fait aucune différence (mais n'est évidemment pas une solution viable non plus).

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

Quel est le comportement attendu ?

Ne cassez pas l'application. Enregistrez un avertissement si vous le souhaitez, afin que je puisse l'ignorer, car dans 100% de mes cas d'utilisation, je me fiche que d'autres middlewares puissent gérer cette répartition. Je soupçonne fortement qu'il y a (ou qu'il devrait y avoir) très peu de raisons légitimes pour lesquelles un envoi à partir d'un contexte middleware devrait jamais interagir avec un autre middleware de la pile, et si c'était le cas, je considérerais qu'un code sentait (cela placerait dépendances d'ordre implicites sur le middleware à tout le moins).

Quelles versions de Redux, et quel navigateur et système d'exploitation sont concernés par ce problème ?

A travaillé jusqu'à ce PR .