Улучшение обработки ошибок для React |Redux |MERN App - PullRequest
Новая
       6

Улучшение обработки ошибок для React |Redux |MERN App

0 голосов
/ 20 декабря 2018

Я думаю, что у этого вопроса есть шанс быть очень полезным / образовательным, и я поделюсь многим из того, что я уже сделал с этим.Чтобы пояснить этот вопрос, вот пример того, как выглядит типичный контейнерный компонент для приложения, которое я создаю (с точки зрения избыточности / потока данных): 

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

Все мои редукторыто же самое - полезные данные имеют sportsData, loading и error, которые возвращаются.Пока данные загружаются, loading == true.Если выборка данных прошла успешно, у sportsData есть нужные мне данные, в противном случае возвращается ошибка.

Для моих приложений, в которых используется сбор данных из 5+ коллекций в моей базе данных, функция mapStateToProps превращается в беспорядок-СУХОЙ кодСоздание реквизитов error1, error2, error3 и т. Д. Также просто кажется плохой практикой.

Есть ли лучший метод для такого типа обработки ошибок / загрузки при извлечении данных с помощью действий / редукторов с избыточностью?Или, как я делаю, это уже лучшая практика?

Редактировать: Дайте мне знать, если обмен информацией о коде действий / редукторе будет полезен.я не хотел перебрасывать это сообщение слишком большим количеством информации, но, может быть, это поможет?

1 Ответ

0 голосов
/ 20 декабря 2018

Вы должны вызвать действие по ошибке, которое вызывает тот же редуктор, независимо от вызова данных, который вызывает ошибку.что-то вроде: 

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

Тогда вы можете делать с данными все, что угодно, если возникнет ошибка, но вам не нужно обрабатывать каждую ошибку отдельно.

...