简介
在编写 Redux 应用时，我们经常需要进行异步操作，并且需要使用 Redux 提供的 redux-thunk 中间件来处理。使用 redux-thunk 中间件可以让我们在 action 中使用异步操作，我们可以将异步操作放在 action 中，通过 dispatch 方法进行调用。
@dmartss/simple-thunk 包是对 redux-thunk 中间件的封装，使其使用更加方便。该包可以让我们以更简洁的方式组织异步操作，并且可以对异步操作进行参数传递和分发异步操作结果，让 Redux 开发更加优雅。
安装
您可以使用 npm 安装该包：
npm install @dmartss/simple-thunk
使用方法
在使用 @dmartss/simple-thunk 包时，我们需要首先创建一个 Thunk 对象，来管理异步操作。我们可以通过 createThunk 方法来创建该对象。createThunk 方法接收一个函数作为参数，在该函数中会定义我们的异步操作。
以下是一个创建 Thunk 对象的示例代码：
import { createThunk } from '@dmartss/simple-thunk';
const myThunk = createThunk(async (dispatch, getState, { param }) => {
// 异步操作代码
});在示例代码中，我们用 createThunk 方法创建了一个 myThunk 对象，该对象的异步操作由 async (dispatch, getState, { param }) => { //异步操作代码 } 定义。在异步操作函数中，我们可以通过传入的 dispatch 方法进行异步操作结果的分发。同时，我们还可以访问 Redux 的 state，通过传入的 getState 方法获取 state。
我们还补充另一个示例：
-- -------------------- ---- ------- ----- ---------- - ----------------- ---------- --------- ---------- -- - ----- -------- - ----- ------------------------------------ ----- ------------ - ----- ---------------- ---------- ----- ------------------ -------- ------------ --- ---
在示例代码中，我们用 createThunk 方法创建了一个 getStudent 对象，该对象的异步操作由 async (dispatch, getState, studentId) => { //异步操作代码 } 定义。在异步操作函数中，我们首先使用 fetch 方法发送了一个 HTTP 请求，获取到了对应的学生数据。然后我们通过传入的 dispatch 方法发送了一个 STUDENT/FETCHED 的 action。在这个过程中，我们可以通过传入的 studentId 获取具体的学生数据。
在创建完 Thunk 对象后，我们需要在 Redux Store 中将其作为一个中间件进行使用。以下是一个将 myThunk 对象作为中间件使用的示例代码：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - --------------------- - ---- ------------------------ ------ ----------- ---- ------------- ----- --------------- - ------------------------ ----- ----- - ------------ ------------ -------------------------------- --
在示例代码中，我们首先通过 createThunkMiddleware 方法创建了一个中间件。然后将该中间件使用在 Redux Store 的 applyMiddleware 方法中，将其作为一个中间件使用。
功能
分发异步操作结果
在使用 @dmartss/simple-thunk 包时，我们可以在异步操作函数中通过 dispatch 方法进行异步操作结果的分发。以下是一个分发异步操作结果的示例代码：
-- -------------------- ---- -------
----- ------- - ----------------- ---------- --------- - ----- -- -- -
----- -------- - ----- -----------------------
----- ------------ - ----- ----------------
----------
----- -------------------
------- ------------
---
---在示例代码中，我们定义了一个异步操作函数。在异步操作函数中，我们首先使用 fetch 方法发送了一个 HTTP 请求，获取到了对应的数据。然后我们通过 dispatch 方法发送了一个 MY_THUNK/SUCCESS 的 action，将异步操作结果作为 result 属性传递。
参数传递
在使用 @dmartss/simple-thunk 包时，我们可以通过 createThunk 方法的第三个参数传递数据到异步操作函数中。以下是一个使用参数传递的示例代码：
-- -------------------- ---- -------
----- ---------- - ----------------- ---------- --------- - --- ---- -- -- -
----- -------- - ----- ------------------------- -
------- ------
-------- -
--------------- ------------------
--
----- --------------------
---
----- ------------ - ----- ----------------
----------
----- ---------------
-------- ------------
---
---
-- -- ---------- --------
--------------------------- --- -- ----- - ----- ----- - ----在示例代码中，我们定义了一个 updateUser 异步操作函数。该函数接收一个对象作为参数，该对象包含了需要更新的 id，以及需要更新的 data 数据。在函数中，我们使用 fetch 方法发送了一个 HTTP 请求，将需要更新的 data 数据发送到后端。当异步操作完成后，我们使用 dispatch 方法发送一个 USER/UPDATED 的 action，将更新后的数据作为 payload 属性传递。
总结
@dmartss/simple-thunk 包可以让 Redux 在管理异步操作时变得更加简单和方便，让我们可以尽可能的减少模板代码的重复，将重点放在业务逻辑的实现上。希望通过本文的讲解可以帮助您更好的理解和使用该包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f80238a385564ab6b2d