React-Redux中错误处理的正确方法

Question

我想了解使用React-Redux进行错误处理的更通用或更正确的方法。

假设我有电话号码注册组件。

如果输入的电话号码无效，该组件将引发错误提示

处理该错误的最佳方法是什么？

想法1： 创建一个组件，该组件接受错误并在将错误传递给它时调度一个操作

想法2： 由于错误与该组件有关，请将该错误传递给组件（该组件未连接到redux，即错误处理程序组件将不会分派操作）

问题：有人可以指导我在React-Redux中针对大型应用程序进行错误处理的正确方法吗？

Answer 1

我会说你最初的想法都没有捕捉到整个画面。想法1只是一个回调。如果要使用回调：useCallback. 如果您不需要使用 redux，想法 2 将起作用并且更可取。有时你最好使用 redux。也许您通过检查所有输入字段都没有错误或类似的东西来设置表单有效性。由于我们讨论的是 redux 的主题，因此我们假设情况就是如此。

通常，使用 redux 处理错误的最佳方法是将错误字段置于 state 中，然后将其传递给错误组件。

const ExampleErrorComponent= () => {
  const error = useSelector(selectError);
  if (!error) return null;
  return <div className="error-message">{error}</div>;
}

错误组件不仅可以显示错误，还可以对useEffect.

如何设置/取消设置错误取决于您的应用程序。让我们以您的电话号码为例。

1.如果有效性检查是纯函数，可以在reducer中进行。

然后，您可以设置或取消设置错误字段以响应电话号码更改操作。在用 switch 语句构建的减速器中，它可能看起来像这样。

case 'PHONE_NUMBER_CHANGE':
  return {
    ...state,
    phoneNumber: action.phoneNumber,
    error: isValidPhoneNumber(action.phoneNumber) ? undefined : 'Invalid phone number',
  };

2. 如果后端报告错误，则调度错误操作。

假设您将电话号码发送到后端，该后端在对号码执行某些操作之前进行验证。您无法知道数据在客户端是否有效。你只需要相信服务器的话。

const handleSubmit = useCallback(
  () => sendPhoneNumber(phoneNumber)
    .then(response => dispatch({
      type: 'PHONE_NUMBER_SUBMISSION_SUCCESS',
      response,
    }))
    .catch(error => dispatch({
      type: 'PHONE_NUMBER_SUBMISSION_FAILURE',
      error,
    })),
  [dispatch, phoneNumber],
);

然后，reducer 应该为错误提供适当的消息并设置它。

不要忘记取消设置错误。您可以在更改操作或根据应用程序发出另一个请求时取消设置错误。

我概述的两种方法并不相互排斥。您可以使用第一个来显示本地可检测的错误，也可以使用第二个来显示服务器端或网络错误。