前言
在现代前端开发中，我们通常使用 Redux 和 React 来构建复杂的应用。随着数据交互的不断增多，我们需要处理各种异步请求，如何高效地管理这些请求成为了一个问题。像 axios 和 fetch 等网络请求库的出现让我们可以简单方便地发起请求，但是它们并不能很好地结合 Redux 来管理状态。而 Redux 强大的状态管理机制使得我们可以很方便地管理所有应用状态，因此我们需要一种库来帮助我们在 Redux 中处理异步请求。
redux-network-fetch 就是一种可以将网络请求的状态管理与 Redux 相结合的 NPM 包。它提供了一个 Redux 中间件来监听网络请求的状态，同时也提供了一些辅助函数来处理常见的网络请求逻辑。
本文就来介绍 redux-network-fetch 的使用方法，希望可以对大家有所帮助。
安装
要使用 redux-network-fetch，首先需要在 your_project 中安装它。我们可以通过 npm 或者 yarn 来进行安装。
npm install redux-network-fetch # 或者 yarn add redux-network-fetch
使用
初始化
通过 npm 安装好了 redux-network-fetch 之后，我们需要在 Redux Store 中创建一个中间件，并将其传给 applyMiddleware。这样 redux-network-fetch 就会拦截所有的网络请求，并将请求状态存储到 Redux Store 中。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ --------------- ---- -------------- ------ - ----------------------- - ---- ---------------------- ------ ----------- ---- ------------------- -- --------- ----- ----------------- - -------------------------- -- -- ----- ----- ----- - ------------ ------------ -------------------------------- ------------------ --
发起请求
使用 redux-network-fetch 发送请求非常简单，只需要使用 fetch 或者其它网络请求库，然后将返回的 Promise 对象传递给 redux-network-fetch 的 createAction 函数即可。
-- -------------------- ---- -------
------ - ------------ - ---- ----------------------
-- ---- ------
------ ----- --------- - -- --
--------------
--------- ---------------------------------------------
------- ------
-------- ---
---
-- ----
----------------------------可以看到，我们在定义 action 的时候使用了 createAction 函数，并传入了一个包含 endpoint、method、headers 等请求参数的对象。redux-network-fetch 会自动发起请求，并将请求的状态存储到 Redux Store 中。
处理请求状态
当我们发起请求之后，redux-network-fetch 会将请求的状态存储在 Redux Store 中。因此，我们需要在应用中结合 Redux Store 来获取请求的状态，并在应用中进行相关的处理。
我们可以通过 connect 函数将 Redux Store 中的状态映射到组件的 props 中，并通过条件渲染的方式展示不同的请求状态。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - --------- - ---- ---------------
----- ----------- ------- --------- -
------------------- -
-- ----
-----------------------
-
-------- -
----- - ----------- ------ ---- - - -----------
-- ------------ -
------ ----------------------
-
-- ------- -
------ ----------- ----------------------
-
------ -
-----
--------------------
-------------------
------
--
-
-
----- --------------- - ----- -- --
----------- -------------------------
------ --------------------
----- -------------------
---
----- ------------------ - -
----------
--
------ ------- ------------------------ ---------------------------------可以看到，我们在组件中使用了 connect 函数，将 Redux Store 中的 isFetching、error 和 data 等状态映射到了组件的 props 中，并渲染了不同的请求状态。
另外，我们也不必手动处理网络请求的各种状态，redux-network-fetch 提供了一些辅助函数，比如 isFetching、isFulfilled、isRejected 等，可以用来在应用中操作网络请求状态。
结语
到这里，我们已经介绍了 redux-network-fetch 在 Redux 中的使用方法。通过使用 redux-network-fetch，我们可以在 Redux 中高效地管理网络请求状态，并且减少大量模板代码。希望本篇文章能够对大家有所启发和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672e20520b171f02e1d43