如何在Redux工具包createAPI中保存一个变异的结果以备以后使用？

wwtsj6pe 于 2022-11-24 发布在其他

关注(0)|答案(1)|浏览(124)

我最近开始使用RTK查询来获取我的应用程序中的数据。在一个用例中，我想使用createAPI变异的结果，我曾经在服务器上创建过一次资源。这涉及到创建一个特定的负载。

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const createResource = createApi({
  reducerPath: 'someReducerPath',
  baseQuery: fetchBaseQuery({ baseUrl: window.API_URL }),
  endpoints: (builder) => ({
    postResource: builder.query({
      // postBody in the parameter is received from the caller function.
      //It is an object containing the payload
      query: (postBody) => ({
        url: 'someURL',
        method: 'POST',
        body: postBody
      }),
      transformResponse: (response) => response
    }),
  }),
});

// Export hooks for usage in functional components, which are
// auto-generated based on the defined endpoints
export const { usePostResourceQuery } = createResource;

如果我想在另一个组件或另一个地方使用这个变异的相同结果，如何在不创建相同负载的情况下做到这一点？我必须将结果分派到不同的切片中存储它吗？或者我们可以以某种方式引用从上述变异中接收到的结果吗？

redux

来源：https://stackoverflow.com/questions/74479768/how-to-save-the-results-of-a-mutation-in-redux-toolkit-createapi-for-later-usage

1条答案

按热度按时间

h9vpoimq1#

理想情况下，不期望Mutations（POST/ PUT）返回静止的任何东西，而是应该配置为使查询tags无效，以便可以重新触发fetch。但是，我确实明白了在某些情况下（为了获取数据），必须触发mutation。
所以，有两种方法可以达到同样的效果（获得对突变的React）：
1.当使用useMutation时，一旦组件卸载（基本上是取消订阅），变异结果就会从rtk-query's存储键即api中删除。因此，唯一的选择是将结果保存在单独的存储键（切片）中，以便以后引用。

const handleSubmit = async () => {
  try {
    const data = await mutationFn(PAYLOAD_BODY).unwrap();
    dispatch(SAVE_MUTATION_RESULT(data)); // save the results
  } catch(err) {
    console.error(err);
  }
};

1.使用fixedCacheKey选项标记变异，并使用dipatch操作方法触发变异，这基本上解释为subscribed，然后让订阅生效（不取消订阅），以便响应停留在rtk-query's存储密钥（api）中，您可以在需要时查询该密钥。

const subcription = dispatch(createResource.endpoints.postResource.initiate(PAYLOAD_BODY, {
    fixedCacheKey: "postResource",
}));

// unsubscribe carefully, (so that don't endup removing the result from store)
subcription.unsubscribe()

现在，要得到响应回来，在任何其他组件，可能是在同一个页面或完全不同的路线，查询回来与相同的关键字：

const  [, {data}] = useMutation({
    fixedCacheKey: "postResource",
})

如果变异及其结果存在于存储中，您将取回数据。
有用的链接：

共享突变结果

谢谢你曼尼什

赞(0）回复(0）举报 2022-11-24

我来回答

如何在Redux工具包createAPI中保存一个变异的结果以备以后使用？

1条答案

相关问题

热门标签

最新问答