리액트-미들웨어 약속 처리

리액트-미들웨어 약속 처리

나는 사용하는 리액트 응용 프로그램을 만들고 있다.redux-axios-middlewareXHR 요청을 한다.설정 방법은 클라이언트에서index.js다음과 같다:

const client = axios.create({ //all axios can be used, shown in axios documentation
  baseURL:'https://api.vktest.xxx/api',
  responseType: 'json',
  validateStatus: function (status) {
    return status >= 200 && status < 300
  }
});

const axiosMiddle = axiosMiddleware(client)

export const store = createStore(rootReducer, composeEnhancers(applyMiddleware(thunk, axiosMiddle)))

나의 구성 요소에서 나는 내 행동을 이렇게 부른다.

store.dispatch(loginAction(credentials))

다음은 작업:

import { LOGIN } from './types'

export function loginAction(credentials) {

  return dispatch => {
      return dispatch(doLogin(credentials) ).then(
      response => {
        dispatch({type: 'LOGIN_SUCCESS', response})
      },
      error => {
        dispatch({type: 'LOGIN_FAIL', error})
        throw error
      }
    )
  }
}

function doLogin(credentials) {
  return {
    type: LOGIN,
    payload: {
      request: {
        url: '/login/',
        method: 'POST',
        data: {
          username: credentials.username,
          password: credentials.password
        }
      }
    }
  }
}

XHR 호출을 위해 악시오스 미들웨어가 포착한 doLogin 함수를 디스패치한다.통화 후 axios 약속에는 다음 유형 중 하나가 포함됨LOGIN_SUCCESS또는LOGIN_FAIL악시오는 이러한 유형들을 자동으로 발송하고 감량기는 그 유형들에 대해 행동할 수 있다.지금까지는 좋다.

그러나 (그리고 나는 가능한 한 명확하게 하려고 노력하고 있다) 공리 요청이 실패하면 공리 약속은 거부되고 공리 약속은 거부된다.LOGIN_FAIL활자가 발송되다그 약속이 해결되었으니.then(..).catch(..)블럭은 어느 모로 보나.then나는 공리 오류를 처리할 수 없을 것 같다. 그 오류는 추악한 일을 하는 것에 대해서..then공리 콜백이 아닌 디스패치 콜백을 처리하는 블록.

다음을 명확히 하기 위해 다음과 같은 일이 일어나고 있다.

store.dispatch -> action -> doLogin -> axios -> reducer -> back to action dispatch.

공리와 환원기 단계 사이의 XHR 오류를 처리하고 싶지만 다음 작업을 수행할 때:

import { LOGIN } from './types'

export function loginAction(credentials) {

  return dispatch => {
      return dispatch(doLogin(credentials).then(
      response => {
        dispatch({type: 'LOGIN_SUCCESS', response})
      },
      error => {
        dispatch({type: 'LOGIN_FAIL', error})
        throw error
      }
    ))
  }
}

function doLogin(credentials) {
  return {
    type: LOGIN,
    payload: {
      request: {
        url: '/login/',
        method: 'POST',
        data: {
          username: credentials.username,
          password: credentials.password
        }
      }
    }
  }
}

다음과 같은 오류가 발생함:

Uncaught TypeError: doLogin(...).then is not a function
    at authentication.js:6

이 문제를 해결하려는 이유는 현재 설정에서 다음 사항을 디스패치하기 때문이다.

이미지에서 볼 수 있듯이LOGIN_FAIL(axios)와 ( theLOGIN_SUCCESS부름을 받고 있다예를 들어 실패한 로그인 시도에 대한 사용자 피드백을 제공할 수 있기 때문에 직접 공리 오류를 처리할 수 있기를 원한다.어쩐지 방법을 알 수가 없다.

누가 좀 도와줄래?

네 말이 무슨 말인지 알 것 같아.

미들웨어 구성에서 returnRejectedPromiseOnError를 설정하여 이 동작을 변경할 수 있다.

약속은 체인 작업에만 반환된다는 점에 유의하십시오.이 옵션을 설정하면 항상 적용해야 함catch콜백하지 않으면 당신은 받을 수 있을 것이다.unhandled rejection when calling Promise오류들그리고 이러한 콜백은 구성 요소가 이미 마운트 해제된 상태에서 실행될 수 있기 때문에 구성 요소에서 처리할 때 몇 가지 문제가 발생할 수 있다.

나는 내 코드를 피하려고 노력한다.then이러한 부작용을 피하기 위해 가능한 한 많이 하지만 내가 해야 할 때는 다음과 같이 한다.

fetchSomething.then(action => {
  if(action.type.endsWith('SUCCESS')) {
      ....
  }

})

참조URL: https://stackoverflow.com/questions/46059459/react-axios-middleware-promise-handling