什么是 fetch-hoc-redux?
fetch-hoc-redux 是一个基于 React 开发的前端库,它可以帮助你使用 React 和 Redux 进行网络请求,并且非常容易使用。
fetch-hoc-redux 提供了一个高阶组件,它可以帮助你将接口请求封装为一个纯函数,再通过 Redux 可以非常方便地将数据存储在 Redux Store 中,方便了组件之间的数据共享。
安装
安装 fetch-hoc-redux 非常简单,只需要在终端执行以下命令即可:
npm install fetch-hoc-redux --save
使用
准备工作
首先,需要在你的 React 项目中安装 redux 和 react-redux。如果你还没有安装,可以通过以下命令来安装:
npm install redux react-redux --save
然后,在你的 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