在前端开发中，数据流管理是十分重要的一环。Redux 是目前最流行的一种数据流管理方式。但是 Redux 本身在异步操作上存在一定的限制，需要使用中间件才能实现异步 Action。
其中非常经典的异步中间件是 Redux-thunk。但是 Redux-thunk的缺点是只能用于异步操作，并不能满足可以向服务器发送请求，并且返回成功或失败结果。这时我们需要借用 fsa-redux-thunk 解决此问题。
fsa-redux-thunk 的优势
fsa-redux-thunk 是一个基于 Redux-thunk 的中间件。它具有以下优点：
- 支持发送 Ajax 请求。
- Ajax 请求支持完美体验的请求成功与失败处理。
- Ajax 请求支持请求前后的 loading 效果。
安装
首先，确保安装了 redux-thunk，可以通过如下命令安装：
npm install --save redux-thunk
然后再安装 fsa-redux-thunk：
npm install --save fsa-redux-thunk
使用
在创建 Store 时，将 fsa-redux-thunk 作为 applyMiddleware 参数即可。
// createStore
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import fsaThunk from 'fsa-redux-thunk';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(thunk, fsaThunk));发送请求
在 Action 中定义 async 和 await 操作即可达到 fsa-redux-thunk 的目标。下面是一个示例：
-- -------------------- ---- -------
-- ----------
------ ----- ---- --------
------ - ------------ - ---- ----------------
------ ----- ----------- - --------------
------ ----- ----------- - --------------
------ ----- ----------- - --------------
----- ---------- - --------------------------
----- ---------- - --------------------------
----- ---------- - --------------------------
------ -------- ---------- -
------ ----- -------- -- -
-----------------------
--- -
----- -------- - ----- ----------------------
------------------------------------
- ----- ------- -
----------------------------
-
--
-另外，我们可以通过结合 redux-actions 包使用 createAction 方法，简化 Action 的创建过程。
通过上面的示例可以看到，我们可以很方便地实现请求发送、请求成功、请求失败的处理。同时可以在 View 中判断 loading 状态。下面是一个简单的 View 示例：
-- -------------------- ---- -------
-- ------------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - -------- - ---- ------------
----- --------- ------- --------- -
------------------- -
----- - -------- - - -----------
---------------------
-
-------- -
----- - ---------- ----- ----- - - -----------
-- ----------- -
------ ----------------------
- ---- -- ------- -
------ -------------------
- ---- -
------ ------------------
-
-
-
-------- ---------------------- -
----- - ---------- ----- ----- - - ----------
------ -
----------
-----
------
--
-
------ ------- ------------------------------------至此，fsa-redux-thunk 的使用教程基本完毕。我们在使用 fsa-redux-thunk 过程中，可以更方便地进行异步 Action 的处理，同时可以通过达到完美的请求控制，提高了 React 和 Redux 的可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fda81e8991b448dd734