如何处理 redux reducer 中的错误

Question

我不确定如何使用 redux 处理 reducer 中的 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);

更新

我已更新组件以显示错误消息并在减速器中返回错误。

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;