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

Question

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

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

如果输入的电话号码无效，该组件会抛出错误

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

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

想法 2:由于错误与该组件相关，因此将该错误传递给组件(未连接到 redux，即错误处理程序组件不会分派(dispatch)该操作)

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

Answer 1

我想说，你最初的想法都没有涵盖全部情况。想法1只是一个回调。如果您想使用回调:useCallback。如果你不需要使用 redux，想法 2 会起作用并且是更好的选择。有时你最好使用 redux。也许您正在通过检查输入字段是否有错误或类似内容来设置表单有效性。由于我们讨论的是 redux，所以我们假设情况就是如此。

通常，使用 redux 进行错误处理的最佳方法是在状态中有一个错误字段，然后将其传递给错误组件。

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

错误组件不必只是显示错误，它还可以使用 useEffect 产生副作用。

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

1。如果有效性检查是纯函数，则可以在reducer中完成。

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

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 应该为错误提供适当的消息并进行设置。

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

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