前言
Redux 是一个非常流行的前端状态管理库。在 Redux 中,Action 是一个普通的 JavaScript 对象,用于描述应用程序中的事件。它们被分发到 Store 中,然后由 Reducer 处理。但是,Redux 中的 Action 默认是同步的,这意味着它们不能用于处理异步操作。在本文中,我们将学习如何实现完整的异步 Action 过程,以便在 Redux 中处理异步操作。
Redux 中的异步操作
在 Redux 中,异步操作是非常常见的。例如,当我们从服务器获取数据时,我们需要发出一个异步请求。我们不能在 Action 中直接处理异步请求,因为 Action 必须是一个普通的 JavaScript 对象。因此,我们需要使用一些中间件来处理异步操作。
Redux 中最常用的异步中间件是 Redux Thunk 和 Redux Saga。在本文中,我们将使用 Redux Thunk 来实现异步操作。
Redux Thunk
Redux Thunk 是一个 Redux 中间件,它允许 Action 创建函数返回一个函数而不是一个对象。这个返回的函数可以接收 dispatch 和 getState 作为参数,并在需要时调用 dispatch。
在 Redux 中,Action 创建函数通常返回一个对象,例如:
-------- ------------- - ------ - ----- ----------- ---- - -
但是,如果我们要处理异步操作,我们需要返回一个函数,例如:
-------- ------------ - ------ -------- -- - ------------------------ ------ ------------------- -------------- -- ---------------- ---------- -- ----------------------------- - -
在这个例子中,fetchTodos 返回一个函数,这个函数接受 dispatch 作为参数,并在需要时调用 dispatch。在这个函数中,我们首先调用了 requestTodos Action,然后发出了一个异步请求,最后在请求成功后调用了 receiveTodos Action。
实现完整的异步 Action 过程
现在我们已经了解了 Redux Thunk,我们可以开始实现完整的异步 Action 过程了。这个过程包括以下步骤:
- 创建一个异步 Action 创建函数。
- 发出一个请求。
- 在请求成功时调用一个 Action。
- 在请求失败时调用一个 Action。
创建一个异步 Action 创建函数
我们可以使用以下模板来创建一个异步 Action 创建函数:
------ -------- --------------- - ------ ----- -------- -- - -- ---- ----- -------- - ----- ------------------ ----- ---- - ----- --------------- -- -- ------ ---------- ----- ------------------ -------- ---- -- - -
在这个例子中,我们创建了一个名为 myAsyncAction 的异步 Action 创建函数。它返回一个函数,这个函数接受 dispatch 作为参数,并在需要时调用 dispatch。在这个函数中,我们首先发出了一个异步请求,然后在请求成功时调用了一个 Action。
发出一个请求
我们可以使用任何库来发出异步请求,例如 fetch、axios 或 jQuery。在本文中,我们使用 fetch 来发出请求。
----- -------- - ----- ------------------ ----- ---- - ----- ---------------
在这个例子中,我们使用 fetch 发出了一个请求,并在请求成功后使用 response.json() 方法解析响应数据。
在请求成功时调用一个 Action
在请求成功时,我们需要调用一个 Action 来更新 Store 中的状态。我们可以使用以下代码来调用一个 Action:
---------- ----- ------------------ -------- ---- --
在这个例子中,我们调用了一个名为 MY_ASYNC_ACTION 的 Action,并将响应数据作为 payload 传递给它。
在请求失败时调用一个 Action
在请求失败时,我们也需要调用一个 Action 来更新 Store 中的状态。我们可以使用以下代码来调用一个 Action:
---------- ----- ------------------------- ------ ---- --
在这个例子中,我们调用了一个名为 MY_ASYNC_ACTION_FAILED 的 Action,并将 error 属性设置为 true。
示例代码
以下是一个完整的示例代码,它使用 Redux Thunk 来实现异步操作:
------ - ------------ --------------- - ---- ------- ------ ----- ---- ------------- ----- ------------ - - ----- ----- -------- ------ ------ ----- - -------- ------------- - ------------- ------- - ------ ------------- - ---- ------------------ ------ - --------- ----- --------------- -------- ----- - ---- ------------------------- ------ - --------- ------ ----- -------- ----- - -------- ------ ----- - - ------ -------- --------------- - ------ ----- -------- -- - ---------- ----- --------------------------- -- --- - ----- -------- - ----- ------------------ ----- ---- - ----- --------------- ---------- ----- ------------------ -------- ---- -- - ----- --- - ---------- ----- ------------------------- ------ ---- -- - - - ----- ----- - -------------------- ----------------------- -------------------------------
在这个例子中,我们首先定义了一个名为 reducer 的 Reducer。它定义了一个名为 MY_ASYNC_ACTION 的 Action 和一个名为 MY_ASYNC_ACTION_FAILED 的 Action。当 MY_ASYNC_ACTION Action 被调用时,它将更新 Store 中的 data 和 loading 属性。当 MY_ASYNC_ACTION_FAILED Action 被调用时,它将更新 Store 中的 error 属性。
然后,我们定义了一个名为 myAsyncAction 的异步 Action 创建函数。它返回一个函数,这个函数接受 dispatch 作为参数,并在需要时调用 dispatch。在这个函数中,我们首先调用了 MY_ASYNC_ACTION_REQUESTED Action,然后发出了一个异步请求。在请求成功时,我们调用了 MY_ASYNC_ACTION Action,并将响应数据作为 payload 传递给它。在请求失败时,我们调用了 MY_ASYNC_ACTION_FAILED Action,并将 error 属性设置为 true。
最后,我们使用 createStore 和 applyMiddleware 函数创建了一个 Store,并将 thunk 中间件传递给 applyMiddleware 函数。然后,我们调用了 myAsyncAction 函数来发出异步请求。
总结
在本文中,我们学习了如何实现完整的异步 Action 过程,以便在 Redux 中处理异步操作。我们使用了 Redux Thunk 来处理异步操作,并创建了一个完整的示例代码来演示如何使用 Redux Thunk。这个示例代码可以作为一个模板,用于处理异步操作。如果您正在开发一个使用 Redux 的应用程序,并需要处理异步操作,那么本文中的内容将对您非常有用。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/66275188c9431a720c3e8b88