前言
redux-call是一款基于redux-thunk扩展的redux插件，旨在简化异步操作的处理流程，使得代码更易读易维护。在本文中，我们将介绍如何使用redux-call来简化异步操作的处理流程。
安装
首先，我们需要先安装redux以及redux-call：
npm install redux redux-call
基本用法
redux-call的基本使用方法非常简单，只需要在createStore方法中将其作为参数传递即可。比如，我们可以先创建一个action creator来发起异步操作：
-- -------------------- ---- ------- -- ---------- ------ - ------------ - ---- ---------------- ----- --------- - -------------------------- -------- -- - -- ---- ------ --------------------------------------------------------------- -- ----------------- --- ------ ------- - --------- --
然后，在创建store时，将redux-thunk和redux-call作为中间件传入：
-- -------------------- ---- ------- -- -------- ------ - ------------ --------------- - ---- -------- ------ ----- ---- -------------- ------ - -------------- - ---- ------------- ------ ----------- ---- ------------- ----- ----- - ------------ ------------ ---------------------- --------------- --
这样，在组件中，我们就可以愉快的使用fetchUser这个action creator了：
-- -------------------- ---- -------
-- ------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ ------- ---- ------------
----- --- ------- --------- -
------------------- -
--------------------------------
-
-------- -
----- - ---- - - -----------
------ -
-----
--- ------ ---
------
--
-
-
----- --------------- - ----- -- --
----- ----------
---
------ ------- ------------------------ --------------实现原理
redux-call的核心思想就是将异步操作封装成一个函数，然后通过redux的dispatch方法触发这个函数执行。在这个函数中，我们可以使用关键字yield来暂停函数执行，并返回一个promise对象，等待异步操作完成后再继续执行函数。
在实际的代码中，redux-call使用了babel-plugin-transform-regenerator实现了yield关键字的编译。
进阶用法
除了基本用法外，redux-call还有一些高级用法，比如使用put来分发其他的action。在上述的例子中，我们可以通过put来触发FETCH_USER_SUCCESS这个action，从而更新用户信息：
-- -------------------- ---- -------
-- ----------
------ - ------------ - ---- ----------------
----- --------- - -------------------------- -------- -- -
-- ----
------ --------------------------------------------------------------- -- -----------------
---
----- ---------------- - ---------------------------------- ---- -- ------
--------- ----------------------- -
--- -
----- ---- - ----- --------------- ----------------
----- ----------------------------
- ----- ------- -
-- ----
-
-
------ ------- -
----------
---------------
--在上述代码中，我们定义了一个以worker开头的函数，用来处理具体的异步操作。当我们使用fetchUser这个action creator时，实际上是调用了这个worker函数。在worker函数中，我们使用了call来调用了异步操作，并使用put来分发了另外一个action，用以更新数据。
总结
本文介绍了redux-call这个npm包的基本使用方法，并且讲解了它的实现原理以及进阶用法。相信大家通过学习本文后，能够使用redux-call更加方便地处理异步操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566b381e8991b448e2fc6