Redux 中如何处理错误-JavaScript中文网-JavaScript教程资源分享门户

Redux 是一个流行的 JavaScript 应用程序状态管理库。它为前端开发人员提供了一个可预测的状态容器，以便更好地管理应用程序状态。在 Redux 中，任何更改状态的操作都是由一个 action 触发的，Reducer 函数会根据这个 action 修改应用程序状态。

但是，有时候我们的应用程序可能会遇到错误。例如，API 请求失败、后端返回错误数据等。在这种情况下，我们需要在 Redux 中处理错误。本文将介绍如何在 Redux 中处理错误。

错误类型

在 Redux 中处理错误的第一步是确定错误的类型。通常情况下，我们会遇到以下几种类型的错误。

网络错误

网络错误是最常见的错误之一。它通常是由于网络连接中断、DNS 错误、防火墙拦截等原因引起的。在处理网络错误时，我们可以使用 axios 等库进行请求，然后根据正常获取数据与否来决定如何处理。

后端返回错误数据

后端返回错误数据的情况也很常见。例如，当用户在表单中输入无效数据时，后端可能会返回 400 Bad Request。我们需要在 Redux 中处理这些错误，以向用户提供更好的反馈。

开发者错误

开发者错误是我们自己编写的代码中的错误。它们可能在编译时或在运行时发生。我们需要了解这些错误并尽快修复它们。

错误处理方案

下面是在 Redux 中处理错误的几种方案。

派发错误 action

这是最常见的处理错误的方案。我们可以定义一个错误 action，并将错误信息作为 action 的负载。然后我们可以在 store 中使用一个错误 reducer 来处理这些错误。这个 reducer 可以更新错误状态，例如设置一个 error 属性为 true，以便应用程序知道当前状态是否出现了错误。

// javascriptcn.com 代码示例
// 错误 action
{
  type: 'FETCH_USER_ERROR',
  payload: {
    message: '用户数据获取失败',
    code: 500
  }
}

// 错误 reducer
function errorReducer(state = {}, action) {
  switch (action.type) {
    case 'FETCH_USER_ERROR':
      return {
        ...state,
        error: action.payload.message,
        statusCode: action.payload.code
      }
    default:
      return state;
  }
}

使用中间件处理错误

我们可以使用 Redux 中间件来处理错误。常见的中间件包括 redux-thunk、redux-saga 等。通过使用这些中间件，我们可以将错误处理与业务逻辑分离，从而使代码更加模块化。

// javascriptcn.com 代码示例
// 使用 redux-thunk 处理错误
function fetchUser() {
  return async dispatch => {
    try {
      const { data } = await axios.get('/api/user');
      dispatch({ type: 'FETCH_USER_SUCCESS', payload: data });
    } catch (error) {
      dispatch({ type: 'FETCH_USER_ERROR', payload: error });
    }
  }
}

在组件中处理错误

我们也可以在应用程序组件中处理错误。例如，当用户输入无效数据时，我们可以在表单组件中检测并处理错误。

// javascriptcn.com 代码示例
import React, { useState } from 'react';
import axios from 'axios';

function Form() {
  const [errors, setErrors] = useState({});

  const handleSubmit = async (event) => {
    event.preventDefault();
    try {
      const { data } = await axios.post('/api/user', formData);
      // ...
    } catch (error) {
      setErrors(error.response.data);
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* form fields */}
      { errors &&
        <div className="error">
          { errors }
        </div>
      }
    </form>
  );
}

总结

在应用程序中处理错误是一项非常重要的任务。在 Redux 中，我们可以使用派发错误 action、使用中间件处理错误或在组件中处理错误等多种方案来处理错误。通过合理的错误处理方案，我们可以提升用户体验，避免一些潜在的问题。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654ea4aa7d4982a6eb7c3940