Как предотвратить многократное отображение одной и той же ошибки с помощью Redux?

Я относительно новичок в React и Redux, но у меня есть базовое понимание того, как работают действия + хранилище + редукторы, чтобы обеспечить односторонний поток данных.

Одна проблема, с которой я столкнулся при написании своего фактического приложения, заключается в том, как отображать предупреждения об ошибках ровно один раз для каждой уникальной ошибки.

Решение, которое я придумал, работает довольно хорошо, но я чувствую, что оно не должно требоваться или что с моей неопытностью я могу что-то упустить.

По сути, это сводится к следующему:

/* In the reducer: */
const initialState = {
    someStateData: 'wow state',
    error: undefined,
    errorId: 0,
}

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case SUCCESS:
            return {
                ...state,
                someStateData: action.data,
                error: undefined,
            }
        case ERROR:
            return {
                ...state,
                error: action.error,
                errorId: state.errorId + 1,
            }
        default:
            return state
    }
}

/* In the view component: */
class SomeComponent extends Component {
    constructor(props) {
        super(props)

        this.state = {
            lastErrorId: 0,
        }
    }

    processHandlers() {
        if (this.props.error &&
            this.props.lastErrorId !== this.state.lastErrorId) {
            this.props.onFailure?.(this.props.error)
            this.setState({
                ...this.state,
                lastErrorId: this.props.lastErrorId,
            })
        }
    }

    componentDidMount() {
        this.processHandlers()
    }

    componentDidUpdate(prevProps, prevState) {
        this.processHandlers()
    }
}

const mapStateToProps = state => {
    return {
        error: state.error,
        lastErrorId: state.errorId,
    }
}

export default (connect(mapStateToProps)(SomeComponent))

Это прекрасно работает - есть ли другой, лучший способ? Более идиоматично с Redux?


person Nathan Bergeron    schedule 27.07.2019    source источник


Ответы (1)


Добавьте его в свою логику или архитектуру... как только произойдет ошибка, сохраните его, это может быть еще один фрагмент вашего магазина, который отслеживает ошибки и другие текущие проблемы. Это точка управления состоянием, что происходит в вашем приложении прямо сейчас...

person user998548    schedule 27.07.2019