运用 Redux Middleware 实现异步请求

阅读时长 10 分钟读完

Redux 是一个非常流行的 JavaScript 应用状态管理库，它使得应用的状态管理更加简单、可预测和可维护。然而在实际的开发过程中，我们经常需要异步请求获取数据，而 Redux 并没有内置的异步能力，这就需要使用 Redux Middleware 解决异步请求问题。

本文将介绍如何使用 Redux Middleware 实现异步请求，包括一些常见的异步请求场景（例如 HTTP 请求），并提供相应的示例代码。

Redux Middleware 简介

Redux Middleware 是 Redux 提供的一个强大功能，它允许我们在处理 Redux Action 的过程中插入自定义的中间件，对 Action 和状态的处理过程进行自定义的修改和增强。

Middleware 通常是一个函数，在处理 Action 的过程中，Redux 会将 Action 和应用的状态传递给 Middleware，Middleware 可以对它们进行处理，并返回结果。它可以拦截 Action 和状态的传递，对它们进行修改、增强、过滤或延迟等操作，然后将结果传递给下一个 Middleware 或者最终的状态 reducer，从而实现对 Redux 的自定义控制和扩展。

在本文中，我们将介绍如何使用 Middleware 实现异步请求，并展示如何通过 Middleware 对异步请求进行统一管理、错误处理和调试。

异步请求场景

在现代的 Web 应用中，异步请求是非常常见的场景。下面是一些常见的异步请求场景：

  • HTTP 请求：从服务器获取内容，例如获取用户数据、获取博客文章、上传文件等。
  • 客户端缓存：从客户端缓存中获取数据，避免发送不必要的请求。
  • WebSocket 连接：通过 WebSocket 连接实现实时数据通信，例如聊天室、实时地图等。
  • Web Worker：使用工作线程进行 CPU 密集型操作，避免阻塞主线程。

在本文中，我们将以 HTTP 请求场景为例，介绍如何使用 Middleware 实现异步请求。

Redux Middleware 实现异步请求

Redux Middleware 提供了一个非常方便的方式，可以实现异步请求操作。我们首先需要创建一个异步的 Action Creator，然后在 Middleware 中监听到这个 Action，根据异步请求的结果来创建新的 Action。

创建异步 Action Creator

异步 Action Creator 是返回一个函数的 Action Creator，而不是直接返回一个 Action 对象。这个函数接受一个 dispatch 函数作为参数，用于在异步请求完成后分发一个新的 Action。

例如，下面是一个简单的异步 Action Creator，用于从服务器加载用户数据：

-- -------------------- ---- -------
-------- ----------------- -
  ------ ------------------ -
    ------ ------------------- - -------
      -------------- -- ----------------
      ---------- -- -
        ---------- ----- --------------------- -------- ---- --
      --
  -
-

在上面的代码中，我们返回了一个函数，它接受一个 dispatch 函数作为参数。在函数中，我们使用 fetch 函数发起 HTTP 请求，并在响应后分发了一个新的 Action。

编写 Middleware

接下来，我们需要编写一个 Middleware，用于监听异步 Action Creator 的执行和响应结果，并分发新的 Action。

例如，下面是一个简单的 Middleware，它用于处理异步 Action Creator。在 Action Creator 中，我们发起了一个 HTTP 请求，并在结果返回后，分发了一个新的 Action。在 Middleware 中，我们使用了 redux-thunk 中间件来处理异步 Action Creator，这使得我们可以在 Action Creator 中编写复杂的异步逻辑（例如多个异步请求的串联或并联）。

-- -------------------- ---- -------
------ ----- ---- -------------
------ - ---------------- ----------- - ---- -------

----- ------------- - ----- -- ---- -- ------ -- -
  -- ------- ------ --- ----------- -
    -- -- ------ ------------- -------- ------
    ------ ----------------------
  -

  -- ------- -------- --
  ------ ------------
-

----- ----------- - ------ - --- ------- -- -
  ------ ------------- -
    ---- ---------------------
      ------ - --------- ----- -------------- -
    --------
      ------ -----
  -
-

----- ----- - ------------------------ ---------------------- ---------------

------------------------------ -- ---- ------

在上面的代码中，我们定义了一个 apiMiddleware 中间件，它用于在异步 Action Creator 中执行 HTTP 请求，并处理响应结果。

我们还定义了一个 rootReducer 函数，用于根据不同的 Action 更新状态。在 Action Creator 中，我们发起了一个名为 FETCH_USER_SUCCESS 的 Action，并将响应 JSON 数据作为 payload 参数传递。

在主代码中，我们使用 createStore 函数创建了一个 Redux Store，并使用 applyMiddleware 函数将 thunk 中间件和 apiMiddleware 中间件应用到 Store 中。这样，我们就可以在异步 Action Creator 中使用 dispatch 函数。

最后，我们使用 store.dispatch 函数发起了一个异步 Action，fetchUser(123) 函数会返回一个函数，该函数接受 dispatch 函数作为参数。在 Middleware 中，我们检查 Action 是否是一个函数，如果是则调用它，否则调用默认的 dispatch 函数。

异步 Action 处理

在异步 Action Creator 中，我们使用 fetch 函数发起了一个 HTTP 请求，并在响应后分发了一个 FETCH_USER_SUCCESS Action。

我们还可以在异步 Action Creator 中处理错误情况，并分发相应的失败 Action，例如：

-- -------------------- ---- -------
-------- ----------------- -
  ------ ------------------ -
    ---------- ----- -------------------- --

    ------ ------------------- - -------
      -------------- -- -
        -- -------------- -
          ----- --- --------------------------
        -
        ------ ---------------
      --
      ---------- -- -
        ---------- ----- --------------------- -------- ---- --
      --
      ------------ -- -
        ---------- ----- --------------------- -------- ------------- --
      --
  -
-

在上面的代码中，我们首先分发了一个 FETCH_USER_REQUEST Action，表示我们发起了请求。然后使用 fetch 函数发起 HTTP 请求，并在响应后检查响应状态码，如果响应错误则抛出一个异常，否则解析响应 JSON 数据并分发一个 FETCH_USER_SUCCESS Action。

如果发生异常，则捕获异常并分发一个 FETCH_USER_FAILURE Action，payload 参数为错误信息。

统一管理和错误处理

通过 Middleware，我们可以非常方便地对异步请求进行统一管理和错误处理。我们可以在 Middleware 中拦截异步请求，对它们进行统一的错误处理、调试和记录。

例如，下面是一个自定义的 apiMiddleware，它用于处理异步请求：

-- -------------------- ---- -------
----- ------------- - ----- -- ---- -- ------ -- -
  -- ------- ------ --- ----------- -
    -- -- ------ ------------- -------- - -------- ------
    ------ ---------------------- ---------------
  -

  -- ------- -------- --
  ----- - ----------- ---------- ---------- ---------- ------- - - ------
  -- ------------- -
    ------ ------------
  -

  ----- ------- - -
    ------- ------
    -------- -
      ------- -------------------
      --------------- ------------------
    --
    -------
  -

  ----- ------- - ----------------- --------
    -------------- -- -
      -- -------------- -
        ----- --- --------------------------
      -
      ------ ---------------
    --
    ---------- -- -
      --------- -- ---------------
    --
    ------------ -- -
      --------------------
      --------- -- ----------------
    --

  --------- -- ------------------

  ------ -------
-

在上面的代码中，我们定义了一个 apiMiddleware，它接受一个 Store 对象，然后返回一个函数，这个函数接受一个 next 函数（调用下一个 Middleware 或者 reducer ）和 action 对象作为参数，并返回结果。

在 Middleware 中，我们首先检查 action 是否为函数，如果是则调用它，并将 dispatch 和 getState 函数传递给它。

否则，我们从 action 对象中获取 requestUrl, onRequest, onSuccess 和 onFailure 等属性。然后根据这些属性，使用 fetch 函数发起 HTTP 请求，并处理响应结果。

在请求开始之前，我们调用了 onRequest 回调函数，如果请求失败则调用 onFailure 回调函数，并且在控制台输出错误日志。

通过这个 apiMiddleware，我们可以实现对异步请求的统一管理和错误处理，避免了重复的代码，并提高了开发效率。

结论

在本文中，我们讨论了如何使用 Redux Middleware 实现异步请求。我们首先介绍了 Redux Middleware 的基本概念和功能，然后介绍了如何编写一个异步 Action Creator 和一个 Middleware，并实现了对异步请求的统一管理和错误处理。

Redux Middleware 是一个非常强大的功能，它可以使得 Redux 的使用更加灵活、可扩展和可维护。通过学习本文，你可以更好地理解 Redux Middleware 的原理和用法，从而更好地应用 Redux 在你的应用中。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670f6c7b5f551281026448be

纠错
反馈
相关推荐
精选内容