在使用Redux时，Redux Thunk是一个非常有用的中间件，它允许我们在Redux Store中执行异步操作。虽然这很方便，但是当我们需要确保异步操作已经完成时，通常需要等待异步操作完成后再进行下一步操作。本文将介绍如何将Redux Thunk分派操作返回Promise，以便于我们可以等待异步操作完成后再进行下一步操作。
Redux Thunk简介
Redux Thunk是一个中间件，它允许我们在Redux Store中执行异步操作。在Redux中，我们通常会创建一个Action Creator，该Action Creator返回一个Action对象，然后我们使用Redux Store的Dispatch方法将Action分派给Reducer来更新Store状态。
使用Redux Thunk，我们可以创建一个返回函数的Action Creator，该函数将被传递给Redux Store的Dispatch方法。这个函数可以执行异步操作，并在操作完成后调用Dispatch方法来分派另一个Action。
以下是一个简单的Redux Thunk Action Creator示例：
----- --------- - -------- -- -
------ ---------- -- -
---------- ----- -------------------- ---
-----------------------------
---------------- -- ----------------
------------ -- -
---------- ----- --------------------- -------- ---- ---
--
-------------- -- -
---------- ----- --------------------- -------- ------------- ---
---
--
--在上述代码中，我们创建了一个名为fetchUser的Action Creator，该函数接收一个userId参数。这个函数返回了一个函数，并将Redux Store的dispatch方法作为参数传递给这个函数。在这个函数中，我们首先分派FETCH_USER_REQUEST Action以指示异步操作已经开始。
然后我们使用Fetch API来获取用户数据。当请求成功返回数据时，我们将分派FETCH_USER_SUCCESS Action来更新Store状态。如果请求失败，则分派FETCH_USER_FAILURE Action来指示操作失败。
将Redux Thunk分派操作返回Promise
现在我们已经知道了如何使用Redux Thunk来执行异步操作，接下来我们需要将这些操作转换为Promise，以便于等待异步操作完成后再进行下一步操作。
我们可以通过创建一个新的函数来实现这一点，该函数接收与Redux Thunk Action Creator相同的参数，并返回一个Promise对象。在函数内部，我们可以使用Redux Thunk Action Creator来执行异步操作，并在操作完成后解析或拒绝Promise对象。
以下是一个将Redux Thunk Action Creator转换为Promise的示例代码：
----- --------- - -------- -- -
------ --- ----------------- ------- -- -
----- ------ - ---------- -- -
---------- ----- -------------------- ---
-----------------------------
---------------- -- ----------------
------------ -- -
---------- ----- --------------------- -------- ---- ---
--------------
--
-------------- -- -
---------- ----- --------------------- -------- ------------- ---
--------------
---
--
-----------------
---
--在上述代码中，我们创建了一个名为fetchUser的函数，该函数与Redux Thunk Action Creator具有相同的参数。在函数内部，我们首先创建一个新的Promise对象，并将操作的Resolve和Reject函数传递给它。
然后，我们使用Redux Thunk Action Creator来执行异步操作，并在操作成功或失败时分别解析或拒绝Promise对象。
请注意，在上述代码中，我们假设存在Redux Store的Dispatch方法。您需要将此代码与实际应用程序的Redux Store集成以使其正常工作。
结论
在本文中，我们介绍了Redux Thunk中间件的基本知识，并演示了如何将异步操作转换为Promise以便于等待操作完成后再进行下一步操作。
尽管这种技术可能不是在所有情况下都是必
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30839