问题标签 [rtk-query]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
351 浏览

redux - Hot to get state from Redux RTK mutation in another component

嘿,我是 RTK 工具包的新手,只是试图从孤立的组件访问状态以存储来自突变的状态,所以我可以跳过将它们传递给该组件。

我可以在 Cashe 键后面看到 redux 存储中突变的结果,但是如何从隔离组件访问存储数据?

我至少阅读了两次文档,发现如果它是 QUERY,我可以使用相同的参数传递 useGet** 钩子并且可以获得结果。但我的情况是访问突变(POST 查询)的结果。

以防万一我可以为整个状态创建选择器:

export const selectSubmitStatus = (state) => state[createApi.reducerPath]; 并且可能手动过滤当前项目,但是使用选择器和传递 Cashe 键可以更容易地访问突变submitState还是?

这里描述的类似问题

0 投票
1 回答
209 浏览

reactjs - 何时运行 injectEndpoint

我正在使用 RTK Query 下载数据,然后在本地操作该数据,而不进行任何 api 突变。所以我已经使用extraReducers

api.js

draftables.js

currentDraftSlice.js

但是,应用程序崩溃说无法matchFulfilled从未定义中获取。或类似的东西。这似乎正在发生,因为createSlice在 aftercreateApibefore injectEndpoints运行。

我通过在切片文件中导入注入解决了这个问题:

但这感觉不对,它绝对不是中心化的。

是否有解决方案,或者至少是最佳实践?

顺便说一句,我明白获取数据并在本地操作它不是 RTK 查询的预期用例,但这是我想要使用它的方式。API 层抽象太好了,不能放弃。

0 投票
1 回答
635 浏览

react-redux - 代码拆分时如何将headers修改为prepareHeaders设置的RTK Query?

使用 RTK 查询代码生成,我从 OpenAPI 规范生成了我的 API 片段。从那个例子开始,我已经扩展了生成的切片,如使用generatedApi.enhanceEndpoints({/**/}).

现在我想添加prepareHeaders到通常通过设置的切片中fetchBaseQuery,并且根据文档,我的用例是为每个请求添加一个身份验证令牌。由于createApi在生成的文件中调用该函数,我想避免触摸它以包含自定义逻辑。

我想我正在寻找generatedApi.enhancePrepareHeaders({/**/})似乎还不存在的东西。

在遵循代码拆分方法且不接触生成的文件时,如何为所有请求设置标头?

0 投票
1 回答
477 浏览

redux - React Query / RTK Query 与 Redux 的集成?

我正在比较 RTK Query 和 React Query,试图决定在我的 React/Redux 应用程序中使用哪一个。

需要考虑的要点之一是它们与 Redux 的集成。

我做了一些研究,似乎两者在这方面的唯一区别是,如果使用 RTK Query,您会在 Redux 存储和 Redux DevTools 中看到查询结果,这更方便一些。

我还想念别的吗?或者除此之外,它们都与 Redux 一起工作?

0 投票
0 回答
58 浏览

react-native - 设置新状态时的 RTK 调用 api

我有一个带有 rtk (redux-toolkit) 的 api,状态为“搜索”

当我调用方法将参数添加到我的搜索并设置新状态时,api 不会再次发生,为什么?

例如:

0 投票
2 回答
568 浏览

reactjs - RTK 查询重置

我有一个 MUI 对话框组件,它在保存时触发 useLazyQuery 操作以获取数据。
然后在成功时调度另一个动作
我的问题是,在成功之后,我想重置对话框组件中 useLazyQuery 挂钩的状态,因为在成功/失败之后,状态就像这样在组件中“卡住”。
我很困惑我应该如何处理这个......
卸载并安装对话框组件可以工作,但它会删除淡出动画并取消订阅查询端点。
这里有我缺少的最佳实践吗?
https://redux-toolkit.js.org/rtk-query/api/created-api/hooks

0 投票
1 回答
301 浏览

typescript - RTK Query:根据 useGet...Query hook 参数从列表中获取一个元素

我使用 RTK Query 获取外部 api 中的文章列表,如下所示(在 createAPI 中):

它很好用,但现在我需要获取一篇文章,而且我没有端点来获取一篇文章。我正在考虑使用 RTK Query transformResponse 从列表中返回一个元素,但我无法访问给定的查询参数,所以我不知道该怎么做!

不要犹豫,要求精确!

0 投票
1 回答
188 浏览

reactjs - 如何将 Redux 工具包与 RTK Query 集成

我正在使用 Redux-toolkit 构建我的购物车系统,我曾经使用 Redux-toolkit + Redux thunk 来处理异步调用,但是在我知道 RTK 查询之后,我认为它是我处理数据获取和处理的更好方法它甚至带有自动缓存。

但是现在我尝试构建一个购物车系统,这就是困扰我的地方,

  1. 我的购物车有两种情况,一种是用户未登录时,一种是用户登录时,第一种发生时我打算将数据存储在本地存储中,后一种我打算存储购物车进入我的后端服务器,据我所知,当发生数据提取时,我可以使用 RTK 查询,但在第一种情况下,我应该如何使用 RTK 查询来实现我的目标?

现在我能想到的是构建一个正常的切片来适应第一个场景,以及 RTK 查询“createAPI”来适应第二个场景。

这样做是正确的方法,还是有更合法的方法?

0 投票
1 回答
178 浏览

reactjs - 一系列链式 http 请求的反应钩子和 RTK 模式

在我的组件中,我需要 fetch contestDetails,从响应 ( draftgroupId) 中获取一个值,然后获取draftGroup. 通常我会将它们分别包装在useEffect

但是,我使用 RTK Query 进行提取,因此提取本身是使用钩子执行的。RTK Query 处理何时获取和何时不获取(或类似的东西),因此第一个查询useGetContestByIdQuery(contestId);可以位于组件的顶层。

然而,第二个查询useGetDraftGroupByIdQuery(draftGroupId);需要等到我们有一个contestId. 但是你不能有条件地调用一个钩子,所以我不能把它包装在一个if,你也不能从另一个钩子调用一个钩子,所以我不能把它包装在一个useEffectcontestId依赖一样的依赖中上面的例子。

我不确定这是否会改变事情,但我也没有使用 RTKQ 挂钩的返回值,因为我在自己的 RTK 减速器中处理该数据(使用extraReducers)。我不认为这有什么不同,因为无论我是draftgroupId从 redux 获得还是从data查询钩子的返回中获得,我的问题仍然是一样的。

这是我想出的,它只是将每个 fetch 包装在它自己的组件中,因为组件将有条件地呈现。

这不可能是正确的方法,对吧?使用 RTK Query 执行此操作的正确方法是什么?

0 投票
1 回答
349 浏览

reactjs - 自定义 fetchBasequery 以进行错误处理

我在我的反应应用程序中使用 rtk fetchBase。从文档中我了解到我们可以创建自定义 baseQuery 来处理响应。我想通过在 401 处理程序中调度减速器来编写一个 baseQuery 来处理 401 错误。如何创建自定义 baseQuery。