如何在 reducer 中处理 Redux 的 redux-promise 中间件 AJAX 错误？

Posted 2023-02-22

【中文标题】如何在 reducer 中处理 Redux 的 redux-promise 中间件 AJAX 错误？

【英文标题】：How to handle Redux's redux-promise middleware AJAX error in a reducer?

【发布时间】：2017-08-27 10:20:45

【问题描述】：

reducer 处理 AJAX 错误的正确位置是什么？ （如果你使用 Redux 加上 redux-promise 中间件）。

应该至少有 3 种错误类型：网络错误/超时、未找到数据或 500 内部服务器错误。我试图处理它的方式是：

  if (action.error) 
    return state;
  

所以整个reducer是：

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 调用可能出现的所有类型错误的正确方法吗？如果不是，那么什么是正确的方法？

【参考方案1】：

我。基本方式：

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

二。进阶方式： 像 nross83 在这里定义你的中间件： Redux: Using async middlewares vs dispatching actions on success functions

三。懒人方式： 使用 redux-promise-middleware，因为它在内部和外部将 FETCH_DATA 扩展到 FETCH_DATA_PENDING、FETCH_DATA_FULLFILLED、FETCH_DATA_REJECTED。请查看https://github.com/pburtchaell/redux-promise-middleware/tree/master/examples的示例

希望这会有所帮助。