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 까지 일했습니다.