如果你正在开发 React 应用程序，你肯定需要处理异步操作。通常，你会使用回调函数、Promise 或 async/await 来处理异步操作。然而，使用 Thunks 可以简化异步操作的处理，并提高代码的可读性和可维护性。
什么是 Thunks？
Thunk 是一个函数，接受一个函数作为参数并返回另一个函数。在 JavaScript 中，Thunk 最常见的用例是将异步操作转换为函数调用。因此，在 React 应用程序中，你可以使用 Thunks 来处理异步操作。
为什么使用 Thunks？
使用 Thunks 可以使你的代码更加清晰、易于维护和扩展。一个 Thunk 是一个函数，对外暴露一个简单的接口来调用异步操作。对于复杂的异步操作，Thunks 可以帮助你抽象出异步操作的细节和错误处理，使你的代码更加模块化和可测试。
在 React 中使用 Thunks 的步骤
下面是在 React 应用程序中使用 Thunks 的基本步骤：
- 安装依赖项
首先，你需要安装以下依赖项：
redux-thunk：这是一个 Redux 中间件，它允许你在 Redux store 中使用 Thunks。
你可以使用以下命令安装它：
npm install redux-thunk --save
- 集成 Redux Thunk
将 Redux Thunk 集成到你的 Redux 应用程序中。在创建 Redux store 之前，使用 applyMiddleware 函数将 Redux Thunk 中间件添加到中间件列表中：
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
applyMiddleware(thunk)
);- 创建 Thunks
创建你自己的 Thunks，封装异步操作并与 Redux store 交互。以下是一个简单的 Thunk 示例：
-- -------------------- ---- -------
------ ----- ---------- - -- -- -------- -- -
---------- ----- --------------------- ---
---------------
-------------- -- ----------------
---------- -- ----------
----- ----------------------
-------- ----
---
------------ -- ----------
----- ----------------------
-------- -------------
----
-在上面的示例中，fetchUsers 函数返回了一个函数，这个函数接受一个 Redux dispatch 函数作为参数，dispatch action 来表示异步操作的不同阶段。
- 调用 Thunks
在组件中使用 useEffect 钩子调用 Thunks：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - ---------- - ---- ------------
----- --- - -- -- -
----- -------- - --------------
----- - -------- ------ ----- - - ----------------- -- -------------
------------ -- -
-----------------------
-- ------------
-- --------- -
------ ----------------------
-
-- ------- -
------ -------------------
-
------ -
----
--------------- -- -
--- ------------------------------
---
-----
--
-
------ ------- ----在上面的示例中，我们使用 useDispatch 钩子获取 dispatch 函数，并使用 useSelector 钩子从 Redux store 中获取我们感兴趣的状态（loading，users 和 error）。我们将 dispatch(fetchUsers()) 调用放在 useEffect 钩子中，以便在组件挂载后调用。
结论
Thunks 是一个强大的工具，可以简化异步操作的处理，并提高代码的可读性和可维护性。通过使用 Thunks，你可以轻松地将异步操作抽象成可测试和可组合的模块，这是开发 React 应用程序所必需的。如果你正在处理复杂的异步操作，那么考虑尝试使用 Thunks，以提高你的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66efcec36fbf96019730ef3a