Redux의 redux-promise 미들웨어 Reductioner에서 AJAX 오류를 처리하는 방법은 무엇입니까?

Question

감속기에서 AJAX 오류를 처리하는 적절한 위치입니까? (Redux와 redux-promise 미들웨어를 함께 사용하는 경우).

적어도 세 가지 유형의 오류가 있어야합니다. 네트워크 오류/시간 초과, 데이터를 찾을 수 없거나 500 내부 서버 오류입니다. 나는 그것을 처리하기 위해 시도하는 방법은 다음과 같습니다

if (action.error) { 
    return state; 
    } 

때문에 전체 감속기는 다음과 같습니다

export default function(state = [], action) { 

    if (action.error) { 
    return state; 
    } 

    switch (action.type) { 
    case FETCH_WEATHER: 
     return [action.payload.data].concat(state); 
    default: 
     return state; 
    } 

} 

이 올바른 방법 위의 오류의 모든 유형을 처리하는 것입니다 AJAX 호출이 수 있다? 그렇지 않다면 적절한 방법은 무엇입니까?

Answer 1

I. 기본 방법 :

A) 액션 제작자 정의 :

import axios from 'axios'; 

//Post list 
export const FETCH_DATA = 'FETCH_DATA'; 
export const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS'; 
export const FETCH_DATA_FAILURE = 'FETCH_DATA_FAILURE'; 

const ROOT_URL = 'foo/bar'; 
export function fetchPosts() { 
    const request = axios({ 
    method: 'get', 
    url: `${ROOT_URL}/data`, 
    headers: [] 
    }); 

    return { 
    type: FETCH_DATA, 
    payload: request 
    }; 
} 

export function fetchDataSuccess(data) { 
    return { 
    type: FETCH_DATA_SUCCESS, 
    payload: data 
    }; 
} 

export function fetchDataFailure(error) { 
    return { 
    type: FETCH_DATA_FAILURE, 
    payload: error 
    }; 
} 

B) 정의 감속기 :

import { FETCH_DATA, FETCH_DATA_SUCCESS, FETCH_DATA_FAILURE } from 'pathToActionTypes'; 
export default function(state = INITIAL_STATE, action) { 
    let error; 
    switch(action.type) { 

    case FETCH_DATA: // start fetching and set fetching = true 
    return { ...state, dataObj: {data:[], error: null, fetching: true} }; 
    case FETCH_DATA_SUCCESS:// return data and set fetching = false 
    return { ...state, dataObj: {data: action.payload, error:null, fetching: false} }; 
    case FETCH_DATA_FAILURE:// return error and set fetching = false 
    error = action.payload || {message: action.payload.message}; // message could be provided if network/server down errors 
    return { ...state, dataOjb: {data: [], error: error, fetching: false} }; 
    default: 
    return state; 
    } 
} 

C) 컨테이너 :

import { connect } from 'react-redux' 
import { fetchData, fetchDataSuccess, fetchDataFailure } from 'pathToActionCreators';  
import FooBarComponent from '../components/foo_bar_component'; 


const mapStateToProps = (state) => { 
    return { 
    fooBar: state.dataObj.data 
    }; 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
    fetchData:() => { 
     dispatch(fetchData()).then((response) => { 
      !response.error ? 
      dispatch(fetchDataSuccess(response.payload.data)) : 
      dispatch(fetchDataFailure(response.payload.data)); 
      }); 
    } 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(FooBarComponent); 

II. 고급 방법 : 여기에 nross83이 작성한대로 미들웨어를 직접 정의하십시오. Redux: Using async middlewares vs dispatching actions on success functions

III. 지연 방식 : redux-promise-middleware는 FETCH_DATA를 FETCH_DATA_PENDING, FETCH_DATA_FULLFILLED, FETCH_DATA_REJECTED 내부 및 외부로 확장하므로 사용합니다. 예를 확인하려면 https://github.com/pburtchaell/redux-promise-middleware/tree/master/examples

희망 사항을 확인하십시오.