Question

我已经为react / redux应用程序创建了自己的全局错误处理，但是我对此有些疑惑。

我的问题是，用户可以在屏幕上包含具有表单的多个组件。例如，有一个包含项目的列表，您可以在其中删除元素，但是如果添加一个新列表，则可以在模式窗口中进行操作。在这种情况下，两种形式都可能导致API调用错误。

我已经看到了现实生活中的示例，其中包含用于错误的全局化简。可以，但是如果我将收到的错误放在这里，我怎么知道在哪里显示它们？它是在模式中发生的还是它背后的形式？

我的解决方案是在每个动作中添加一个“原始”参数，并在调度程序中填充该参数（通过我使用polyfill使其在大多数浏览器中均可工作）： this.constructor.name

我有一个减速器，可以处理每个失败的请求：

case APPLICATION_ERROR: {
   const newState = _.cloneDeep(state);

   newState.errors = _.filter(newState.errors, error => error.origin !== action.payload.origin);
   newState.errors.push(action.payload);

   return newState;
}

以此，我能够创建一个ErrorMessageBar组件，该组件仅显示按每个组件的来源过滤的消息。

这可行，但是我真的不喜欢为每个动作传递原点。是否有人有现实生活经验或任何想法如何应对？还是这样可以吗？

class ErrorMessageBar extends React.PureComponent<IComponentProps> {
    public render() {
        const {origin, errors} = this.props;
        const filteredErrors = _.filter(errors, error => error.origin === origin);

        if (filteredErrors.length > 0) {
            return (
                <MessageBar
                    messageBarType={MessageBarType.error}
                    isMultiline={true}
                >
                    {
                        filteredErrors.map(error => (error.message))
                    }
                </MessageBar>
            );
        } else {
            return <></>;
        }
    }
}

以适当的方式显示每个组件的错误

0 个答案: