前言
在前端开发中，状态管理是一个非常重要的问题，Redux 是一个非常流行的状态管理框架。然而，使用 Redux 进行状态管理时，在处理异步逻辑上可能会显得有些棘手。为此，社区中推出了许多的异步 action 库，其中最为流行且被广泛使用的为 redux-thunk。
然而，随着项目变得越来越庞大，以及应对复杂逻辑的需要，redux-thunk 曾经被认为并不是最优的选择。于是，redux-action-thunk 库应运而生，它可以使得我们在处理异步逻辑上变得更加方便、简单。本文将为大家详细介绍 npm 包 redux-action-thunk 的使用教程。
安装
首先，您需要在项目中安装 redux-action-thunk，可以通过如下命令进行安装：
npm install redux-action-thunk --save
基本使用
在介绍 redux-action-thunk 的使用方法之前，让我们先来回顾一下 redux-thunk 的使用方法。
redux-thunk
在 redux-thunk 中，我们需要使用 thunk 函数来进行异步处理。具体使用方法如下：
-- -------------------- ---- -------
----- --------- - -- -- -
------ ---------- -- -
-- ------
-------------------------------------------- -- -
-- ---------- -----
---------- ----- -------------- -------- -------- --
---------------- -- -
-- --------
--------------------
--
-
-如上，我们通过返回一个函数，在异步操作完成后再度 dispatch 一个 action，从而更新我们的 state。
redux-action-thunk
在 redux-action-thunk 中，我们将 dispatch 与异步操作的逻辑处理逻辑从 thunk 函数中抽离出来。具体使用方法如下：
-- -------------------- ---- -------
------ - ---------------- - ---- --------------------
------ ----- ------------------ - -----------------
------------------------
----- -- -
-- ---------
------ ------------------------- -- -
-- -----------
------ -
----- --------------
-------- --------
-
--
-
-值得注意的是，我们需要引入 createAsyncThunk 函数来处理代码。另外，在 redux-action-thunk 中，我们需要返回一个对象，包括 type 和 payload 字段，这与 redux-thunk 中返回一个函数的方法不同。此外，我们在 createAsyncThunk 函数中需要传入一个 action 类型和一个发起异步请求的方法。
在我们调用 fetchDataWithThunk 请求数据时，只需要如下进行调用即可：
this.props.fetchDataWithThunk('https://xx.com/data')此外，我们还可以将 dispatch 以及 getState 方法传入到异步处理方法中，以对我们的 state 做更为精细的处理。代码实现如下：
-- -------------------- ---- -------
------ - ---------------- - ---- --------------------
------ ----- ------------------ - -----------------
------------------------
----- ----- --------- --------- -- -
--- -
-- ------
----- --- - ----- --------------
----- ---- - -------- -- --
-- ---------
----- ---- - ------------- -- -
------ -
--- --------
----- ---------
-
--
-- -- -----
------ -
----- --------------
-------- ----
-
- ----- ------- -
--------------------
-
-
-案例演示
为了方便理解，我们掌握 redux-action-thunk 的用法，下面我们来演示一个 click 案例：
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - ------- - ---- -------------
------ - ------------------ - ---- -----------
----- --- ------- --------- -
-- ------------
------------------- -
-----------------------------------------------------
-
-------- -
------ -
-----
--------- ------ ----- ---------
----
--------------------------- -- -
--- ------------------------------
---
-----
------- ----------- -- -------------------------------------------
--------- ----------------------
------
-
-
-
----- --------------- - ------- -- --
----- ---------- -- ---
------ ----------- -- -
--
----- ------------------ - -
------------------
-
------ ------- ------------------------ ------------------------在上面的演示中，我们请求了一个接口数据，并将通过请求到的数据渲染到页面中。 另外，我们还增加了一个 Counter 按钮，点击此按钮可以计数器加 1。而在 redux-action-thunk 中，也同样可以使用 count 的处理逻辑，具体代码如下：
-- -------------------- ---- -------
------ - ----------- - ---- -------------------
------ - ---------------- - ---- --------------------
------ ----- ---------- - -------------
----- --------------
------------- --
--------- -
---------- ------- ------- -- ----- - -------------
---------- ------- ------- -- ----- - ------------
-
--
-- ---- ------
------ ----- ------------------- - -----------------
-----------
----- ------- --------- --------- -- -
--- -
----- ----- - --------------------- -- -
----- ------ - ----- - -----
-- ---
----------
----- -----------------------------
-------- ------
--
-- ---
------ ------
- ----- ------- -
--------------------
-
-
-在上面的代码中，我们首先创建一个初始值为 0 的计数器，并创建了两个 action 类型 INCREMENT 和 DECREMENT，在 createAsyncThunk 中，我们传入了一个 action 类型和一个异步逻辑处理的函数，其中我们通过 startCount.actions.INCREMENT 的方式对计数器进行增加操作。这里的 startCount.actions.INCREMENT 表示我们通过 createSlice 函数创建的 action 类型。
然后，我们将 startCountWithThunk 绑定到计数器的按钮上，并将 count 的值渲染到了页面中。关于 startCount 的使用则是根据 redux-starter-kit ，我这里就不进行过多的介绍了，有兴趣的朋友可以自行了解。
结语
在本文中，我们介绍了 npm 包 redux-action-thunk 的使用方法。相比于 redux-thunk，redux-action-thunk 更加简洁，以及易用。在处理异步逻辑时，redux-action-thunk 可以使您的代码更加简单明了，使得您可以专注于业务逻辑处理，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067009e361a36e0bce8c10