改进React的错误处理| Redux | MERN App

时间:2018-12-19 22:11:11

标签: reactjs redux react-redux

我认为这个问题有机会非常有帮助/有教育意义,我将分享很多我已经做过的事情。为了帮助阐述这个问题,下面是一个示例,说明我正在构建的应用程序的典型容器组件的外观(从redux /数据流的角度来看):

// Import React Components
import React, { Component } from 'react';
import { connect } from 'react-redux';

import { fetchDataA } from '../actions/data-a-action.js';
import { fetchDataB } from '../actions/data-b-action.js';
import { fetchDataC } from '../actions/data-c-action.js';

class WhiteBoard extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.dispatch(fetchDataA());
        this.props.dispatch(fetchDataB());
        this.props.dispatch(fetchDataC());
    }

    render() {
        if(this.props.error1) { return <div> error message </div> }
        if(this.props.error2) { return <div> error message </div> }
        if(this.props.error3) { return <div> error message </div> }
        if(this.props.loading) { return <div> Loading Screen </div> }

        return (
            <div>
                <p> A website with only a p tag </p>
            </div>
        );
    }
}

function mapStateToProps(reduxState) {
    console.log('reduxState: ', reduxState);
    return {
        dataA: reduxState.DataAReducer.sportsData,
        dataB: reduxState.DataBReducer.sportsData,
        dataC: reduxState.DataCReducer.sportsData,

        loading: (reduxState.DataAReducer.loading ||
                  reduxState.DataBReducer.loading ||
                  reduxState.DataCReducer.loading),

        error1: reduxState.DataAReducer.error,
        error2: reduxState.DataBReducer.error,
        error3: reduxState.DataCReducer.error
    };
}

export default connect(mapStateToProps)(WhiteBoard);

我所有的减速器都是相同的-有效负载具有返回的sportsDataloadingerror。加载数据时,loading == true。如果数据获取成功,sportsData将拥有我需要的数据,否则将返回错误。

对于涉及从我的数据库中的5个以上的集合中获取数据的我的应用程序,mapStateToProps函数变成一堆非DRY代码。创建道具error1,error2,error3等也感觉很糟糕。

对于通过带redux的操作/归约器进行的数据提取,是否有针对此类错误/加载处理的更好实践?还是我已经做到了这是最佳实践?

编辑:让我知道共享操作/归约代码是否有帮助。我不想过多地散布这篇文章,但也许​​这些会有所帮助?

1 个答案:

答案 0 :(得分:0)

无论引发数据错误的数据调用如何,您都应调用一个错误操作,该操作将调用相同的reducer。像这样:

try {
  const res = await fetchData()
  dispatch(success_data(data)
} catch (err) {
  dispatch(sameErrorAction)
}

然后,如果有错误,您可以对数据进行任何处理,但不必分别处理每个错误。