在介绍这个包之前,我想简要解释一下开发这个包的动机和应用场景
让我们首先来看一下传统的React请求数据场景
这是一个纯显示列表,通过Axios请求数据渲染时一切正常 当我们在多个地方需要他时,就像这样
出现重复的网络请求
因此,我们的第一个要求是共享来自同一请求的数据
但我们现在不要急于解决这个问题,继续看更多的场景
让我们添加一些内容 为每个子项目添加年龄增长功能 并添加一个函数来保存和修改此列表组件 所以我们现在有了这个要求 随着年龄的增长,数据是相同的。我们希望每个列表项的数据都是同步的 但这些数据存储在本地状态,我们不想频繁地启动网络请求来更改数据。 相反,本地记录在保存时会存储在服务器上
让我们先看看目前的实际情况
不幸的是,组件的状态是独立的,因此本地没有同步 为了解决这个问题,我们可能需要执行状态提升或使用useContext 但我们不想这样做,会比较麻烦
useSingleRequest
通过这些演示,我相信你会有一些疑虑,比如状态管理是如何进行的。 我将其与Facebook的实验性状态管理库Recoil相结合, 所以如果你想使用它,你需要导入 封装了RecoilRoot的根组件 放在根节点
如果你已经在使用Recoil,你所需要做的就是像这样导入SRProvider
useSingleRequest接收三个参数 第一个参数是当前为存储同一请求的数据唯一key 第二个参数是你的请求函数将会被主动调用 第三个参数是你提供的格式化程序,它将在成功获得结果后格式化请求最终得到的结果就是解构出的data
SetData用于更改本地状态,就像setState一样 有几个与状态相关的布尔值isLoading isError 当出现请求错误时,将自动捕获该错误 如果你想知道具体信息,你可以解构errorMessage 查看具体错误 runRequest是您传入的请求函数被封装了各种内部状态关联的产物。调用后的请求结果将更新data 所以你注意到有两种方法可以更新数据 一种是在本地更新setData 一个是runRequest请求新的数据更新