在前端开发中，状态管理是非常重要的一部分。为了更好地实现状态管理，可以使用著名的 JavaScript 库 Redux。而在 Redux 中，redux-deferred 是一个非常好用的 npm 包。本文将会教你如何使用 redux-deferred 实现更加高效的状态管理。
什么是 redux-deferred
redux-deferred 是 Redux 作者封装的一个中间件，可以让你以同步的方式去处理异步操作。举个例子：在 Redux 中，如果你需要进行一个异步请求并更新状态，你只能制定一个 action 来发起请求，那么你得等到异步请求结束之后，再次派发一个 action，来更新状态。这是非常繁琐的。而 redux-deferred 则不同，它可以让你以同步的方式去处理异步请求，让你的代码更加简单和易于维护。
redux-deferred 的安装和使用
redux-deferred 是一个 npm 包，你可以使用 npm 或 yarn 来进行安装：
npm install redux-deferred --save
或者：
yarn add redux-deferred
当你安装成功之后，在 Redux 中使用 redux-deferred 同样需要通过 applyMiddleware 来应用中间件：
import { createStore, applyMiddleware } from 'redux';
import deferredMiddleware from 'redux-deferred';
import reducers from './reducers';
const store = createStore(reducers, applyMiddleware(deferredMiddleware));完成了以上操作后，你就可以在 Redux 中使用 redux-deferred 了。
redux-deferred 的基本使用
在这里，我们通过一个简单的示例来进行讲解。假设我们需要使用 redux-deferred 进行异步操作，比如获取用户的头像地址。首先，我们需要定义一个异步 action，使用 FSA（Flux Standard Action）的形式：
-- -------------------- ---- -------
------ - ------- - ---- --------------
----- --------- - -------- -- -
------ -
----- -------------------
----- -
--------- -----
--
-------- -
-------
-------- ------------------------------------------------- -- ----------------
-
--
-可以看到，这里我们将异步操作与普通的 action 进行了分离。meta 对象中的 deferred 属性告诉 redux-deferred，这个 action 是一个异步操作。而 payload 中的 promise 则是一个异步操作的 Promise，它将在 action 派发时执行，最终 resolve 一个值并更新状态。
定义了异步 action 之后，我们需要在 reducer 中进行处理：
-- -------------------- ---- -------
------ - ------- - ---- --------------
----- ------------ - -
---------- ---
--
------ ------- -------- ------------- - ------------- ------- -
------ ------------- -
---- -------------------
------ -
---------
---------- -
-------------------
------------------------ -----------------------
--
--
--------
------ ------
-
-可以看到，在 reducer 中，我们对异步操作的 Promise 进行了存储。这样，当我们需要获取异步操作的结果时，只需要访问相应的 Promise 对象即可。
最后，在组件中使用异步操作即可：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - --------- - ---- ------------
----- ---------- ------- --------- -
------------------- -
----- - --------- ------ - - -----------
----------------------------
-
-------- -
----- - --------- - - -----------
----- --- - -----------------------------
------ -
---- --------- --
--
-
-
------ ------- --------------- -- --
---------- ----------------
----------------完整的示例代码请参见下面：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - --------- - ---- ------------
----- ---------- ------- --------- -
------------------- -
----- - --------- ------ - - -----------
----------------------------
-
-------- -
----- - --------- - - -----------
----- --- - -----------------------------
------ -
---- --------- --
--
-
-
------ ------- --------------- -- --
---------- ----------------
----------------
------ - ------- - ---- --------------
----- --------- - -------- -- -
------ -
----- -------------------
----- -
--------- -----
--
-------- -
-------
-------- ------------------------------------------------- -- ----------------
-
--
-
------ - ------- - ---- --------------
----- ------------ - -
---------- ---
--
------ ------- -------- ------------- - ------------- ------- -
------ ------------- -
---- -------------------
------ -
---------
---------- -
-------------------
------------------------ -----------------------
--
--
--------
------ ------
-
-总结
在实际的开发过程中，状态管理经常会涉及到异步操作。而 redux-deferred 的出现，则为我们处理异步操作提供了新的思路。使用 redux-deferred 可以让我们以同步的方式去处理异步操作，从而提高了我们的开发效率，让我们的代码更加清晰易懂。希望通过本文的讲解，大家可以更好地掌握 redux-deferred 的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b31