Question

我不确定如何使用redux在reducer中处理api请求的错误。

我的减速机中有以下内容

grid-template-rows: auto auto auto minmax(1px, 1fr);

我的api调用返回有效错误，但我该如何向用户显示？这就是我在组件中处理reducer错误的方法。我正在检查reducer返回的状态对象中是否存在错误，并通过设置状态将消息呈现到页面上

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

更新

我更新了组件以显示错误消息并在reducer中返回错误。

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

在我的reducer中，我不明白如何在回答中提及另一个initConfirm(){ this.runOnce = true; if(this.props.approvecommsmatrix.error){ this.setState({ message: this.props.approvecommsmatrix.error.message}); }else{ } }。

操作

error case

Answer 1

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

在减速机中

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

在你的应用程序的渲染功能中，你在主要回归之前检查这个错误。

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

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

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;

如何处理redux reducer中的错误

1 个答案: