Блог

Я пишу свое первое пользовательское промежуточное программное обеспечение и немного не понимаю, что происходит. Моя цель — проверить, получает ли какое-либо действие сетевую ошибку, если да, консоль.запишите это.

 import { Middleware, MiddlewareAPI, Dispatch, Action } from "redux"

export const logger: Middleware = <S>(api: MiddlewareAPI<S>) => (
  next: Dispatch<S>
) => <A extends Action>(action: A): A => {
  console.log("Before")
  const result = next(action)
  if (action.type.HTTPStatus) {
    console.log("HERE IS AN ERROR")
  }

  console.log("After", api.getState())
  return result
}
  

Действие.тип.HttpStatus не работает. Я пытался фильтровать действия на основе action.печатаю, но не уверен, как это сделать. Кажется, все, что я прикрепляю к action.type.все, что угодно, ничего не нарушает, но и ничего не делает. Вот пример действия API.

 export const getTelevisionChannels = (televisionIds: string[]) => async (
  dispatch: Dispatch<AppState>
) => {
  try {
    const response = await API.post(
      "/Channels/querys/status",
      { body: JSON.stringify({ televisionIds }) },
      true,
      dispatch
    )
    const televisionChannels = await response.json()
    televisionChannels.map((televisionChannel: any) =>
      dispatch(
        getChannelsSuccess(televisionChannel.televisionId, televisionChannel.channels)
      )
    )
  } catch (err) {
    dispatch(push("/404"))
    console.log(err)
  }
}
  

У меня действительно есть цель разобраться с этой ошибкой с помощью отдельного компонента отправки с его собственным редуктором и действием, но сначала мне нужно иметь возможность заставить это промежуточное программное обеспечение работать.

Недавно я написал apiMiddleware, поэтому вот упрощенная версия. Что вы хотите, так это перехватить ошибку при возникновении проблемы с API и затем отправить действие с ошибкой { type: errorType } . Затем вам нужен редуктор для обработки этих изменений.

 export default function createApiMiddleware(axios) {
  return ({ getState }) => next => action => {
    const api = action[CALL_API]
    if (!api) {
      return next(action)
    }

    const obj = {}
    const { actionPrefix, types, method, host, url, onSuccess, ...props } = api
    const prefix = actionPrefix || ''
    const [startedType, successType, errorType] = types ? types : ACTION_KEYS.map(v => prefix   v)

    next({ type: startedType })

    obj.method = method || 'get'
    obj.url = host ? (host   url) : url

    const onSuccessOps = Object.assign({}, defaultOnSuccess, onSuccess)
    const { responseBody } = onSuccessOps

    const afterSuccess = (payload) => {
      const { customActions } = onSuccessOps
      customActions.forEach(type => {
        next({ type, payload })
      })      
    }

    return axios(
      Object.assign(obj, { ...props })
    ).then(res => {
      const payload = responseBody(res)      
      next({ type: successType, payload })
      afterSuccess(payload)
    }, err => {
      next({ type: errorType, payload: err })
    })
  }
}  

 export default function createApiReducer(actionPrefix, options) {
  const ops = Object.assign({}, defaultOptions, options)
  const initialState = {
    data: [],
    isLoaded: false,
    isLoading: ops.loadOnStart,
    error: null,
  }

  return (state = initialState, action) => {
    const custom = ops.customActions[action.type]
    if (custom) {
      return custom(state)
    }

    switch (action.type) {
      case `${actionPrefix}Loading`:
        return {
          ...state,
          isLoading: true,
          error: null
        }
      case `${actionPrefix}Error`:
        return {
          ...state,
          isLoading: false,
          error: action.payload
        }
      case `${actionPrefix}Success`:
        return {
          ...state,
          isLoading: false,
          isLoaded: true,
          error: null,
          data: action.payload
        }
      default:
        return state
    }
  }
}  

Поскольку вам нужно промежуточное программное обеспечение, поэтому я помещаю его здесь в качестве ссылки, обычно вы просто хотели бы отправить пару действий для одного API в любом учебнике redux. Надеюсь, это поможет.