npm 包 fetch-hoc-redux 使用教程

阅读时长 5 分钟读完

什么是 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

纠错
反馈

纠错反馈