npm 包 redux-asynch-middleware 使用教程

介绍

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

安装

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

npm install redux-asynch-middleware --save

使用

接着，在 store.js 中引入 redux-asynch-middleware：

import { createStore, applyMiddleware } from 'redux';
import asyncMiddleware from 'redux-asynch-middleware';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  applyMiddleware(asyncMiddleware)
);

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

import thunkMiddleware from 'redux-thunk';

const store = createStore(
  rootReducer,
  applyMiddleware(thunkMiddleware, asyncMiddleware)
);

示例

接下来，让我们来看一下如何在 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