在前端开发中，我们经常需要处理异步请求，如加载数据、发送请求等。而 Redux 是一个流行的 JavaScript 应用程序状态管理库，它使用单个不可变状态树来管理整个应用程序的状态。Redux-thunk 是 Redux 中间件，允许将异步操作作为 action 处理，而不用编写额外的 action 类型。
为什么需要 Redux-thunk
当我们需要处理异步操作，通常会创建两个 action 类型：一种用于发出请求，另一种用于接收响应。这很麻烦，在处理更复杂的操作时会更加繁琐，还需要编写异步序列。Redux-thunk 可以让我们只需编写一个 action creator，并使用中间件自动处理异步操作。这使得我们可以非常简单地从组件中调用异步操作。
Redux-thunk 的实现
安装 Redux-thunk：使用 npm 安装 Redux-thunk
--- ------- ------ -----------
使用 Redux-thunk 中间件：在创建 Redux store 时，将 Redux-thunk 作为 applyMiddlewares 的参数之一传入。
------ - ------------ --------------- - ---- -------- ------ --------------- ---- -------------- ------ ----------- ---- ------------- ----- ----- - ------------ ------------ ---------------- --------------- - --创建异步 action：创建一个 action creator 函数，用于发出异步操作。这个函数应该返回一个函数，而不是一个对象。被返回的函数接受 dispatch 和 getState 两个参数。dispatch 函数可用于发出其他 action，而 getState 函数可用于读取 Redux store 的当前状态。
------ ----- --------- - -- -- - ------ ---------- --------- -- - ---------- ----- --------------- --- ------ --------------- -------- -- ---------- ----- --------------------- -------- ------------- --- ----- -- ---------- ----- --------------------- -------- ----- -- -- -- --在组件中使用异步 action：从组件中分发异步操作函数。
------ - ------- - ---- -------------- ------ - --------- - ---- ------------- ----- ---------------- ------- --------- - ------------------- - ----------------------- - -------- - ------ - ----- ---------------------- - ------------- - ---------------- ------ -- - - ----- --------------- - ----- -- -- ----------- ----------------- ----- ---------- --- ------ ------- ------------------------ - --------- ---------------------
示例代码
------ - ------------ --------------- - ---- --------
------ --------------- ---- --------------
----- ------------ - -
----------- ------
----- -----
------ ----
--
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- ----------------
------ - --------- ----------- ---- --
---- ---------------------
------ - --------- ----------- ------ ----- -------------- --
---- ---------------------
------ - --------- ----------- ------ ------ -------------- --
--------
------ ------
-
--
------ ----- --------- - -- -- -
------ ---------- --------- -- -
---------- ----- --------------- ---
------ ---------------
-------- -- ---------- ----- --------------------- -------- ------------- ---
----- -- ---------- ----- --------------------- -------- ----- --
--
--
--
----- ----- - ------------
------------
----------------
---------------
-
--
------ ------- ------结论
Redux-thunk 允许我们将异步操作看作是 action，这使得我们可以像处理同步操作一样来处理异步操作。从组件中调用异步操作时，只需简单地分发 action creator 函数即可。使用 Redux-thunk 中间件，我们可以更加轻松地处理异步操作和状态管理。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6721db582e7021665e091274