如何处理Redux还原器中的错误

Question

我不确定如何使用redux在还原器中处理API请求的错误。

我在还原器中有以下内容

export default function(state = {}, action) {
    switch (action.type) {
    case APPROVE_COMMSMATRIX_SOX:
    case FETCH_COMMSMATRIX:
        if (action.payload.data.header.error) {
            return Object.assign({}, state, {
                error: {
                    code: "INVALID ACTION",
                    message: action.payload.data.header.message,
                    action
                }
             });
       } else {
           return { ...state, [action.payload.data.body.recordset.record[0].id] : action.payload.data.body.recordset.record[0] };
       }
    default:
        return state;
    }
}

我的API调用正在返回有效的错误，但是如何向用户显示此错误？这就是我在组件中处理还原错误的方式。我正在检查还原器返回的状态对象中是否存在错误，并通过设置状态

将消息渲染到页面上

class Approve extends Component {
    constructor(props) {
        super(props);
        this.runOnce = false;
        this.initConfirm = this.initConfirm.bind(this);
        this.state = {
                message : <div>Confirming...<i className="fa fa-spinner fa-spin"></i></div>
        }
    }
    componentDidMount() {
        const id = this.props.match.params.id;
        this.props.approveCommsmatrixSox(id);
    }
    initConfirm(){
        this.runOnce = true;
        if(this.props.approvecommsmatrix.error){
            this.setState({ message: this.props.approvecommsmatrix.error.message}); 
        }
    }
    render() {
        const { approvecommsmatrix } =  this.props ;
        if(!this.runOnce && approvecommsmatrix !== undefined && Object.keys(approvecommsmatrix).length > 0 ){
            this.initConfirm();
        }
        return (
            <div className="container-fluid">
                <div className="row-fluid top-buffer">{this.state.message}</div>
            </div>
        );
    }
}
function mapStateToProps({ commsmatrices }, ownProps) {
    if(commsmatrices.error){
        return { approvecommsmatrix : commsmatrices };
    }
    return { approvecommsmatrix : commsmatrices[ownProps.match.params.id] };
}
function mapDispatchToProps(dispatch) {
    return bindActionCreators(
        { approveCommsmatrixSox },
        dispatch
    );
}
export default connect(mapStateToProps, { approveCommsmatrixSox })(Approve);

update

我已经更新了组件以显示错误消息并返回还原器中的错误。

initConfirm(){
        this.runOnce = true;
        if(this.props.approvecommsmatrix.error){
            this.setState({ message: this.props.approvecommsmatrix.error.message}); 
        }else{
        }
    }

在我的还原器中，我不明白如何调用另一个error case，如您在答案中所述。

动作

import axios from 'axios';
export const FETCH_COMMSMATRIX = 'fetch_commsmatrix';
export function fetchCommsmatrix(id) {
    const request = axios.get(`/api/user/comms/matrices/id/`+id+`/format/json?quiet=1`);    
    return {
        type: FETCH_COMMSMATRIX,
        payload: request
    };
}
export const FETCH_COMMSMATRICES_BY_SERVICE = 'fetch_commsmatrices_by_service';
export function fetchCommsmatricesByService(service_id) {
    const request = axios.get(`/api/user/comms/matrices/format/json?quiet=1&service_id=`+service_id);   
    return {
        type: FETCH_COMMSMATRICES_BY_SERVICE,
        payload: request
    };
}
export const APPROVE_COMMSMATRIX_SOX = 'approve_commsmatrix_sox';
export function approveCommsmatrixSox(id) {
    const params = 'approve=1';
    const request = axios.post(`/api/admin/rename/comms/matrices/id/`+id+`/format/json?quiet=1`,params);    
    return {
        type: APPROVE_COMMSMATRIX_SOX,
        payload: request
    };
}

Answer 1

在这种情况下我要做的就是向状态添加错误变量，并为此错误创建另一个动作。

在您的还原器中

case ERROR:
return {
...state,
error: action.error
}

在您的应用程序的渲染函数中，您在主返回之前检查此错误。

if(this.props.error) 
return (
            <div className="container-fluid">
            {this.props.error}
            </div>
        );

在您的操作中，您只需检查错误，并在存在时返回错误操作。也许是这样的。

let returnValue;
if(request.data.header.error !== null) {  
returnValue = {type: ERROR,payload: request.data.header.error}
} else {
returnValue = {
        type: FETCH_COMMSMATRIX,
        payload: request
    };
}
return returnValue;