reactjs - 有没有办法获取存储在 api slice [RTK Query] 中的所有响应?
问题描述
这是根据页面返回数据的钩子
const {
data,
isFetching,
isLoading,
isError,
} = useGetResourceQuery(page, perPage );
这是api
export const api = createApi({
baseQuery: fetchBaseQuery({
baseUrl: "http://localhost:3001",
}),
tagTypes: ["resource"],
endpoints: (build) => ({
getResource: build.query({
query: (page = 1, perPage = 20) =>
`resource?spage=${page}&limit=${perPage}`,
}),
}),
});
export const {useGetResourceQuery} = api
有什么方法可以提取所有查询的状态?我想实现基于滚动的分页(无限滚动)我们需要更新中间件吗?或者有什么方法可以访问状态并将其作为上面的函数公开,我浏览了文档但找不到解决方案
我可以使用本地状态并将它们连接起来,但想知道是否可以使用 RTK
谢谢
解决方案
我认为大多数实现都将“无限滚动”的问题过度复杂化了很多。你可以通过退后一步思考你真正需要的东西来实现这一点:
- 当前视图中的数据
- 一些额外的数据到我们滚动到的方向
由于我们很懒,不想跟踪我们滚动到哪个方向,所以假设
- 当前视图中的数据
- 两个方向都有一些额外的数据。
还让我们假设查询返回如下响应
{
offset: 50,
items: [...]
}
因此,假设一页足够大以包含屏幕的所有数据,我们最终会得到类似
const currentPage = // something calculated from ScrollPosition
const lastResult = usePageQuery(currentPage - 1, { skip: currentPage === 1 }) // don't fetch pages before 0
const currentResult = usePageQuery(currentPage)
const nextResult = usePageQuery(currentPage + 1)
const combined = useMemo(() => {
const arr = new Array(pageSize * (currentPage + 1))
for (const data of [lastResult.data, currentResult.data, nextResult.data]) {
if (data) {
arr.splice(data.offset, data.items.length, ...data.items)
}
}
return arr
}, [pageSize, currentPage, lastResult.data, currentResult.data, nextResult.data])
// work with `combined` here
由于组件未引用的请求将在存储中保留 60 秒,因此用户可以快速向上滚动许多页面而无需进一步请求 - 而且,可能永远不会再次滚动到的数据将从缓存中删除,并且只需在必要时重新获取。
推荐阅读
- html - 内置 Bootstrap 'scrollTo' 功能?
- python - 使用 PySpark 数据框中的 2 列作为查找替换所有其他列
- wordpress - 使用 WordPress 网站插件或使用第 3 方的自动滴灌/工作流表单
- winforms - PowerShell Winform GUI 中的 WebView2
- r - R:从两列创建整数数组,然后绘制直方图
- flutter - 颤动中的非活动输入连接上的文本字段显示太多
- reactjs - 使用无效数据调用的函数 addDoc()。不支持的字段值:未定义
- java - 使用 Ecpise 从数据库中检索列表时出现问题
- apache-spark - Linux 上的 Spark 错误:线程“main”中的异常 java.io.IOException:无法运行程序“python”:错误 = 2,没有这样的文件或目录
- c - 这个例外是什么意思?格式 %d 需要类型为“int”的参数,但参数 2 的类型为“long long unsigned int”[-Wformat]