Как справиться с ошибкой AJAX промежуточного ПО Redux в редукторе?

Question

Это правильное место для обработки ошибки AJAX на редукторе? (если вы используете Redux плюс redux-promise промежуточный слой).

Должно быть как минимум 3 типа ошибок: сетевая ошибка / тайм-аут, данные не найдены или 500 Internal Server Error. Я пытался справиться с этим так:

  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. Базовый способ:

а) Определите ваши действия создателей:

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
  };
}

б) Определить редукторы:

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;
  }
}

в) контейнер:

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: Использование асинхронного промежуточного ПО против диспетчерских действий для функций успеха

III. Ленивый способ: используйте промежуточное программное обеспечение redux-обещание-промежуточное ПО, поскольку оно расширяет FETCH_DATA до FETCH_DATA_PENDING, FETCH_DATA_FULLFILLED, FETCH_DATA_REJECTED внутри и снаружи. Пожалуйста, ознакомьтесь с примерами на https://github.com/pburtchaell/redux-promise-middleware/tree/master/examples

Надеюсь, что это может помочь.