什么是 fetch-hoc-redux?
fetch-hoc-redux 是一个基于 React 开发的前端库，它可以帮助你使用 React 和 Redux 进行网络请求，并且非常容易使用。
fetch-hoc-redux 提供了一个高阶组件，它可以帮助你将接口请求封装为一个纯函数，再通过 Redux 可以非常方便地将数据存储在 Redux Store 中，方便了组件之间的数据共享。
安装
安装 fetch-hoc-redux 非常简单，只需要在终端执行以下命令即可：
--- ------- --------------- ------
使用
准备工作
首先，需要在你的 React 项目中安装 redux 和 react-redux。如果你还没有安装，可以通过以下命令来安装：
--- ------- ----- ----------- ------
然后，在你的 Redux Store 中添加中间件：
------ - ------------ --------------- - ---- -------- ------ -------------------- ---- ------------- ------ -------- ---- ------------- ------ ---- ---- --------- ----- -------------- - ----------------------- ----- ----- - ------------ --------- ------------------------------- -- ------------------------- ------ ------- ------
在这个例子中，我们引入了 redux-saga 中的 createSagaMiddleware，以帮助我们在 Store 中运行异步任务。
然后，我们创建了一个 store，将它作为参数传递给 applyMiddleware 来添加中间件。
最后，我们运行了中间件 sagaMiddleware，并将 saga 传递给它，以帮助我们处理异步请求。
接口请求
fetch-hoc-redux 提供了一个 fetchData 高阶组件，可以帮助我们发起请求，并将请求结果存储在 Redux Store 中。
------ - --------- - ---- ------------------ ----- ------- ------- --------------- - --- - ------ ------- ----------- ---- ----------------------------------------------- ------- ------ ------------
在这个例子中，我们导入了 fetchData 高阶组件，并将其作为一个包装器（wrapper）使用。
fetchData 高阶组件会将 url 和 method 参数传递给一个封装后的纯函数，并将请求结果存储在 Redux Store 中，并将状态更新到 Redux Store 中。
访问请求结果
一旦请求完成，我们可以使用 connect 方法从 Redux Store 中访问数据。
------ - ------- - ---- --------------
----- ------- ------- --------------- -
-------- -
----- - -------- ---- - - -----------
-- --------- -
------ ----------------------
-
------ ------------------------
-
-
----- --------------- - ----- -- --
---------------------
---
------ ------- --------
----------------
-----------在这个例子中，我们使用 connect 方法从 Redux Store 中映射数据到组件中，并在组件的 render 方法中使用数据。
当请求正在进行中时，我们根据 loading 属性渲染 Loading... 文本。
当请求完成时，我们使用 data 属性展示请求结果中的 title 属性。
示例代码
------ ----- ---- --------
------ - ------- - ---- --------------
------ - --------- - ---- ------------------
----- ------- ------- --------------- -
-------- -
----- - -------- ---- - - -----------
-- --------- -
------ ----------------------
-
------ ------------------------
-
-
----- --------------- - ----- -- --
---------------------
---
------ ------- --------
----------------
--
-----------
---- -----------------------------------------------
------- ------
-----------
--总结
fetch-hoc-redux 是一个非常容易使用的 React 库，可以帮助我们使用 Redux 进行网络请求。
fetch-hoc-redux 可以帮助我们封装接口请求并将响应结果存储在 Redux Store 中，这使得我们可以非常方便地在组件之间共享请求结果。
当使用 fetch-hoc-redux 时，请确保您在 Redux Store 中启用了中间件，以帮助处理异步任务。
在开始使用 fetch-hoc-redux 之前，请确保您已经安装了 redux 和 react-redux。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055fd781e8991b448dd624