Полезная нагрузка Redux action игнорируется при отправке какого-либо другого действия внутри перехватчика ax ios - PullRequest
0 голосов
/ 28 января 2020

Мне нужно позвонить checkConnection перед любым другим действием, поэтому я подумал об использовании перехватчиков ax ios:

axios.interceptors.request.use(
  async config => {
    await store.dispatch(checkConnection())

    const { requestTime, hash } = intro(store.getState())

    return {
      ...config,
      headers: {
        'Request-Time': requestTime,
        'Api-Hash-Key': hash
      }
    }
  }
)

intro - селектор повторного выбора, используемый для выполнения некоторых «тяжелых» вычислений на serverTime (serverTime - результат checkConnection)

checkConnection - это избыточное действие thunk:

export const checkConnection = () => async (dispatch, _, {
  Intro
}) => {
  dispatch(introConnectionPending())

  try {
    const { data: { serverTime } } = await Intro.checkConnection()

    dispatch(introConnectionSuccess(serverTime))
  } catch ({ message }) {
    dispatch(introConnectionFailure(message))
  }
}

Итак, теперь каждый раз, когда я отправляю действие, которое вызывает API, checkConnection запускается первым.

Проблема в том, что редуктор, отвечающий за тип, который вызывается основным действием, отправляемым (не checkConnection), даже не видит полезную нагрузку.

Вот пример действия:

export const getData = () => async (dispatch, getState, {
  API
}) => {
  dispatch(dataPending())

  const credentials = getUsernamePasswordCombo(getState())

  try {
    const { data } = await API.login(credentials)

    dispatch(dataSuccess(data))
  } catch ({ message }) {
    dispatch(dataFailure())
  }
}

и его редуктор:

export default typeToReducer({
  [SET_DATA]: {
    PENDING: state => ({
      ...state,
      isPending: true
    })
  },
  SUCCESS: (state, { payload: { data } }) => ({
    ...state,
    isPending: false,
    ...data
  }),
  FAILURE: state => ({
    ...state,
    isPending: false,
    isError: true
  })
}, initialValue)

1 Ответ

0 голосов
/ 28 января 2020

Редуктор совершенно не прав. Должно быть:

export default typeToReducer({
  [SET_DATA]: {
    PENDING: state => ({
      ...state,
      isPending: true
    }),
    SUCCESS: (state, { payload: { data } }) => ({
      ...state,
      isPending: false,
      ...data
    }),
    FAILURE: state => ({
      ...state,
      isPending: false,
      isError: true
    })
  }
}, initialValue)

Обратите внимание, что части SUCCESS и FAILURE теперь находятся внутри [SET_DATA]

...