如何在Reduux中處理Redux的redux-promise中間件AJAX錯誤？

在reducer中處理AJAX錯誤是否合適？（如果您使用Redux加上redux-promise中間件）。如何在Reduux中處理Redux的redux-promise中間件AJAX錯誤？

應至少有3種類型的錯誤：網絡錯誤/超時，未找到數據或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調用可以有？如果不是，那麼什麼是合適的方式？

來源

2017-04-02 太極者無極而生

一，基本的方法：

一）定義你的行動創造者：

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

三。懶惰的方式：使用redux-promise-middleware，因爲它將FETCH_DATA擴展到FETCH_DATA_PENDING，FETCH_DATA_FULLFILLED，FETCH_DATA_REJECTED內部和外部。請查看https://github.com/pburtchaell/redux-promise-middleware/tree/master/examples

希望這可能有所幫助。

來源

2017-05-26 04:04:49

如何在Reduux中處理Redux的redux-promise中間件AJAX錯誤？

回答

相關問題