问题标签 [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.
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还是?
这里描述的类似问题
reactjs - 何时运行 injectEndpoint
我正在使用 RTK Query 下载数据,然后在本地操作该数据,而不进行任何 api 突变。所以我已经使用extraReducers
api.js
draftables.js
currentDraftSlice.js
但是,应用程序崩溃说无法matchFulfilled
从未定义中获取。或类似的东西。这似乎正在发生,因为createSlice
在 aftercreateApi
但before injectEndpoints
运行。
我通过在切片文件中导入注入解决了这个问题:
但这感觉不对,它绝对不是中心化的。
是否有解决方案,或者至少是最佳实践?
顺便说一句,我明白获取数据并在本地操作它不是 RTK 查询的预期用例,但这是我想要使用它的方式。API 层抽象太好了,不能放弃。
react-redux - 代码拆分时如何将headers修改为prepareHeaders设置的RTK Query?
使用 RTK 查询代码生成,我从 OpenAPI 规范生成了我的 API 片段。从那个例子开始,我已经扩展了生成的切片,如使用generatedApi.enhanceEndpoints({/**/})
.
现在我想添加prepareHeaders
到通常通过设置的切片中fetchBaseQuery
,并且根据文档,我的用例是为每个请求添加一个身份验证令牌。由于createApi
在生成的文件中调用该函数,我想避免触摸它以包含自定义逻辑。
我想我正在寻找generatedApi.enhancePrepareHeaders({/**/})
似乎还不存在的东西。
在遵循代码拆分方法且不接触生成的文件时,如何为所有请求设置标头?
redux - React Query / RTK Query 与 Redux 的集成?
我正在比较 RTK Query 和 React Query,试图决定在我的 React/Redux 应用程序中使用哪一个。
需要考虑的要点之一是它们与 Redux 的集成。
我做了一些研究,似乎两者在这方面的唯一区别是,如果使用 RTK Query,您会在 Redux 存储和 Redux DevTools 中看到查询结果,这更方便一些。
我还想念别的吗?或者除此之外,它们都与 Redux 一起工作?
react-native - 设置新状态时的 RTK 调用 api
我有一个带有 rtk (redux-toolkit) 的 api,状态为“搜索”
当我调用方法将参数添加到我的搜索并设置新状态时,api 不会再次发生,为什么?
例如:
reactjs - RTK 查询重置
我有一个 MUI 对话框组件,它在保存时触发 useLazyQuery 操作以获取数据。
然后在成功时调度另一个动作
我的问题是,在成功之后,我想重置对话框组件中 useLazyQuery 挂钩的状态,因为在成功/失败之后,状态就像这样在组件中“卡住”。
我很困惑我应该如何处理这个......
卸载并安装对话框组件可以工作,但它会删除淡出动画并取消订阅查询端点。
这里有我缺少的最佳实践吗?
https://redux-toolkit.js.org/rtk-query/api/created-api/hooks
typescript - RTK Query:根据 useGet...Query hook 参数从列表中获取一个元素
我使用 RTK Query 获取外部 api 中的文章列表,如下所示(在 createAPI 中):
它很好用,但现在我需要获取一篇文章,而且我没有端点来获取一篇文章。我正在考虑使用 RTK Query transformResponse 从列表中返回一个元素,但我无法访问给定的查询参数,所以我不知道该怎么做!
不要犹豫,要求精确!
reactjs - 如何将 Redux 工具包与 RTK Query 集成
我正在使用 Redux-toolkit 构建我的购物车系统,我曾经使用 Redux-toolkit + Redux thunk 来处理异步调用,但是在我知道 RTK 查询之后,我认为它是我处理数据获取和处理的更好方法它甚至带有自动缓存。
但是现在我尝试构建一个购物车系统,这就是困扰我的地方,
- 我的购物车有两种情况,一种是用户未登录时,一种是用户登录时,第一种发生时我打算将数据存储在本地存储中,后一种我打算存储购物车进入我的后端服务器,据我所知,当发生数据提取时,我可以使用 RTK 查询,但在第一种情况下,我应该如何使用 RTK 查询来实现我的目标?
现在我能想到的是构建一个正常的切片来适应第一个场景,以及 RTK 查询“createAPI”来适应第二个场景。
这样做是正确的方法,还是有更合法的方法?
reactjs - 一系列链式 http 请求的反应钩子和 RTK 模式
在我的组件中,我需要 fetch contestDetails
,从响应 ( draftgroupId
) 中获取一个值,然后获取draftGroup
. 通常我会将它们分别包装在useEffect
:
但是,我使用 RTK Query 进行提取,因此提取本身是使用钩子执行的。RTK Query 处理何时获取和何时不获取(或类似的东西),因此第一个查询useGetContestByIdQuery(contestId);
可以位于组件的顶层。
然而,第二个查询useGetDraftGroupByIdQuery(draftGroupId);
需要等到我们有一个contestId
. 但是你不能有条件地调用一个钩子,所以我不能把它包装在一个if
,你也不能从另一个钩子调用一个钩子,所以我不能把它包装在一个useEffect
像contestId
依赖一样的依赖中上面的例子。
我不确定这是否会改变事情,但我也没有使用 RTKQ 挂钩的返回值,因为我在自己的 RTK 减速器中处理该数据(使用extraReducers
)。我不认为这有什么不同,因为无论我是draftgroupId
从 redux 获得还是从data
查询钩子的返回中获得,我的问题仍然是一样的。
这是我想出的,它只是将每个 fetch 包装在它自己的组件中,因为组件将有条件地呈现。
这不可能是正确的方法,对吧?使用 RTK Query 执行此操作的正确方法是什么?
reactjs - 自定义 fetchBasequery 以进行错误处理
我在我的反应应用程序中使用 rtk fetchBase。从文档中我了解到我们可以创建自定义 baseQuery 来处理响应。我想通过在 401 处理程序中调度减速器来编写一个 baseQuery 来处理 401 错误。如何创建自定义 baseQuery。