在 React 和 Redux 的项目开发中，经常需要处理异步操作，例如从后端获取数据或者发送请求等。而 React-Redux-Thunk 就是一个非常好的解决方案，它可以让我们在 Redux 中处理异步操作，同时也可以让我们的代码更加简洁和易于维护。
React-Redux-Thunk 简介
React-Redux-Thunk 是 Redux 的一个中间件，它可以让我们在 Redux 中使用异步操作。在 Redux 中，我们通常是通过 dispatch 一个 action 来触发 reducer 更新 state，而 action 通常是一个简单的对象，例如：
----- --------- - -- -- -- ----- ----------- --
这种 action 可以直接被 Redux 处理。但是，当我们需要处理异步操作时，我们需要 dispatch 一个函数，而不是一个对象。这时就需要使用 React-Redux-Thunk。
React-Redux-Thunk 可以让我们 dispatch 一个函数，这个函数可以接收 dispatch 和 getState 两个参数，例如：
----- --------- - -- -- ---------- --------- -- -
---------- ----- -------------------- --
------------------
-------------- -- ----------------
---------- -- -
----------
----- ---------------------
-------- ----
--
--
------------ -- -
----------
----- ---------------------
-------- -----
--
--
-这个函数返回的是一个函数，这个函数接收 dispatch 和 getState 两个参数，可以在这里进行异步操作。当我们需要获取数据时，我们可以 dispatch fetchData 这个函数，这时 Redux 会自动调用这个函数，并且将 dispatch 和 getState 作为参数传递给它。
React-Redux-Thunk 的使用
使用 React-Redux-Thunk 非常简单，我们只需要在 createStore 的时候将它作为 applyMiddleware 的参数传入即可：
------ - ------------ --------------- - ---- ------- ------ ----- ---- ------------- ------ ----------- ---- ------------ ----- ----- - ------------ ------------ ---------------------- -
这样，我们就可以在 Redux 中使用异步操作了。
React-Redux-Thunk 的实践
下面我们来看一个实际的例子，假设我们有一个应用程序，需要从后端获取用户信息，并且在获取到用户信息后，将用户信息保存到 Redux 中。我们可以这样实现：
- 定义一个 action，用于触发获取用户信息的操作：
------ ----- ----------- - -- -- ---------- --------- -- -
---------- ----- ----------------------- --
------------------
-------------- -- ----------------
---------- -- -
----------
----- ------------------------
-------- ----
--
--
------------ -- -
----------
----- ------------------------
-------- -----
--
--
-- 定义一个 reducer，用于处理获取用户信息的操作：
----- ------------ - -
--------- -----
---------- ------
------ ----
-
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------------------
------ -
---------
---------- -----
------ ----
-
---- ------------------------
------ -
---------
--------- ---------------
---------- ------
------ ----
-
---- ------------------------
------ -
---------
---------- ------
------ --------------
-
--------
------ -----
-
-
------ ------- ------------ 在组件中使用 getUserInfo 这个 action：
------ ------ - --------- - ---- -------
------ - ------------ ----------- - ---- -------------
------ - ----------- - ---- ------------------------
----- ---- - -- -- -
----- -------- - -------------
----- - --------- ---------- ----- - - ----------------- -- -----------
------------ -- -
-----------------------
-- -----------
-- ----------- -
------ ---------------------
-
-- ------- -
------ ----------- ---------------------
-
------ -
-----
-------- ---------
--------- -- -
-----
---------- ---------------------
----------- ----------------------
------
--
------
-
-
------ ------- ----这样，我们就完成了一个简单的从后端获取用户信息并保存到 Redux 中的操作。
总结
React-Redux-Thunk 是一个非常好的解决方案，它可以让我们在 Redux 中处理异步操作，并且可以让我们的代码更加简洁和易于维护。在实际开发中，我们可以根据自己的需求灵活使用它，从而提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/662a1465c9431a720c7b1c8e