在前端开发中，请求数据是最基本的操作之一。为了方便开发人员在react应用中请求数据，并且更好地管理数据状态，开发者zoujie（github名）开发了一个npm包叫u5-redux-fetch。
一、u5-redux-fetch的作用
u5-redux-fetch是一个基于redux中间件的React网络请求插件，采用redux store来统一管理应用的所有状态。使用这个插件可以简化异步操作的代码，并且实现对请求的状态进行管理（比如：loading状态等）。
二、u5-redux-fetch的安装
u5-redux-fetch的安装非常简单，只需要在命令行工具中输入以下命令即可：
npm install u5-redux-fetch --save
三、u5-redux-fetch的使用
下面介绍一下在react应用中使用u5-redux-fetch的具体步骤。
1.在redux store中添加u5-redux-fetch中间件
import {createStore, applyMiddleware, combineReducers} from 'redux';
import thunk from 'redux-thunk';
import {fetchMiddleware, combinedReducers} from 'u5-redux-fetch';
const store = createStore(
combinedReducers({}), //需要传入一个空的reducer
applyMiddleware(thunk, fetchMiddleware)
);2.定义异步请求的action
-- -------------------- ---- ------- ------ -------------- ---- ----------------- ----- -------------- ------------- ------------- - ------------------------------ ------ -------- ------------- - ------- -------- ---------- - --------------------------- -------- ------------------ ----------------- -- ---------------- ------------- -- - -------------------------------- ----- --------------- -- - --------------------------------- ------ -- -
这里的fetchActions('GET_USER_LIST')会生成请求的三个action：fetchRequest， fetchSuccess， fetchFailure，其作用分别是用来发送请求（fetchRequest），请求成功（fetchSuccess），请求失败（fetchFailure）时在store中更新对应的状态。
getUserList这个方法的作用是发送请求并将请求结果通过dispatch方法进行分发。这一步的代码和原本的异步请求方法非常类似，但是在u5-redux-fetch中把错误处理和loading状态都交给了fetchMiddleware进行管理。
3.在react组件中使用state和props来管理请求的状态
在组件中，你需要使用connect方法将store中的state和action creator连结起来，然后通过对应的action creator来发送请求。下面是一个展示用户列表的简单例子。
-- -------------------- ---- -------
------ --------- ---- --------------
------ ------------- ---- -------------------
----- -------- ------- --------- -
------------------- -
-------------------------
-
-------- -
----- ----------- ------ --------- - -----------
-- ------- -
------ -------------------------- -
-
-- ----------- -
------ ----------------------
-
------ -
----
--------- -- ----------------- -- -
--- ------------------------------
---
-----
--
-
-
----- --------------- - ------- -- --
---------- ------------------------------
------ --------------------------
--------- -------------------------
---
------ ------- ------------------------ -------------------------这个组件会先发送异步请求，请求完成后会通过mapStateToProps来获取state中的数据，然后根据不同的状态进行对用户界面的展示。一些常见状态的判断方法在上面的代码中也有演示。
四、总结
使用u5-redux-fetch可以大大简化异步请求代码的复杂度，降低代码量，同时也更好地实现了对应用状态的管理。这个插件还支持请求前后的事件监听以及部分有用的选项配置，具有很好的扩展性。建议开发者可以引入该插件进行开发。
五、其他
如果想要更深入的了解和使用u5-redux-fetch的特性，可以查看作者的官方文档或者通过npm的源代码来学习。
六、参考链接
u5-redux-fetch npm官方链接：https://www.npmjs.com/package/u5-redux-fetch
u5-redux-fetch源代码链接：https://github.com/zoujie95/u5-redux-fetch
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005568381e8991b448d34e0