npm 包 redux-asynch-middleware 使用教程

阅读时长 5 分钟读完

介绍

redux-asynch-middleware 是一个用于处理异步 action 的 redux 中间件。它可以使得我们在 redux 中以更加清晰规范的方式进行异步处理。

安装

要使用 redux-asynch-middleware,我们需要先安装它。在命令行中输入以下命令:

使用

接着,在 store.js 中引入 redux-asynch-middleware:

我们需要注意的是,redux-asynch-middleware 需要和 redux-thunk 配合使用,因为它使用了 redux-thunk 中间件的 dispatch 方法。所以,我们也需要在 store.js 中引入 redux-thunk:

示例

接下来,让我们来看一下如何在 redux 中调用异步 action。

首先,我们需要定义一个异步 action:

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

在上面的代码中,我们首先向 redux 发送一个 FETCH_DATA_REQUEST 的 action。然后,我们使用 try-catch 块来从服务器获取数据,并在获取成功后,向 redux 发送 FETCH_DATA_SUCCESS 的 action,并且将获取到的数据作为 payload 传递给该 action。如果获取数据的过程中出现了错误,我们将发送 FETCH_DATA_FAILURE 的 action,并且将错误对象作为 payload 传递给该 action。

接下来,在组件中,我们需要按照以下方式调用这个异步 action:

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

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

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

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

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

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

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

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

在上面的代码中,我们通过 connect 函数将组件与 redux 连接起来,并将 fetchData action 作为 props 注入到该组件中。其中,componentDidMount 方法中调用了 fetchData action,并且在组件渲染过程中,根据 isLoading 和 error 的不同情况,展示不同的内容。

结语

通过学习本文,我们学会了如何使用 redux-asynch-middleware 来处理 redux 中的异步 action。通过这种方式,我们可以以一种更加清晰规范的方式组织我们的代码,并且更好地维护我们的 redux 应用程序。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005752581e8991b448ea412

纠错
反馈