redux 在rtk查询中将函数作为参数发送

jv4diomz 于 2023-10-19 发布在其他

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

我有一个从react钩子获取用户令牌的服务，所以我不能直接在Redux Toolkit Query（RTKQ）API中使用该服务。因此，我尝试使用组合，并在稍后调用突变时传递服务。
是否可以将服务作为参数传递给RTKQ函数？
我试过这么做。它工作，但我得到一个错误日志，说一个不可序列化的数据存储在状态。
我的例子突变：

removeItemById: builder.mutation<void, {service: ItemService; uuid: string}>({
  invalidatesTags: ['Beneficiaries'],
  queryFn: async ({ service, uuid }) => {
    const result = await service.remove(uuid);
    return { data: result };
  },
})

使用方法：

const [remove, { isLoading, isError, isSuccess }] = useRemoveItemByIdMutation();

const handleRemove = () => {
  remove({service: itemService, uuid});
};

错误类型：

A non-serializable value was detected in the state, in the path: `item.queries.getItems({}).originalArgs.add`

redux

来源：https://stackoverflow.com/questions/76852175/send-function-as-parameter-in-rtk-query

1条答案

按热度按时间

rdlzhqv91#

问题是service作为一个函数，是一个不可序列化的值。
如果您使用的是查询而不是变化，则可以在端点上使用serializeQueryArgs属性。根据文档，突变似乎不允许这样做。
我的建议是创建并导出一个“services”对象，该对象将您希望从API切片调用的各种服务打包起来，并提供service作为查找键。
范例：

import itemService from '../itemService';
... other service imports ...

type Service = ItemService | ... other service types ...;

interface Services = {
  [key: string]: Service;
}

export services: Services = {
  item: itemService,
  ... other services ...
};

import { serivces } from '../services';

...

removeItemById: builder.mutation<void, { service: string; uuid: string }>({
  invalidatesTags: ['Beneficiaries'],
  queryFn: async ({ service, uuid }) => {
    const result = await services[service].remove(uuid);
    return { data: result };
  },
}),

const [
  remove,
  { isLoading, isError, isSuccess }
] = useRemoveItemByIdMutation();

const handleRemove = () => {
  remove({ service: "item", uuid });
};

赞(0）回复(0）举报 2023-10-19

我来回答

redux 在rtk查询中将函数作为参数发送

1条答案

相关问题

热门标签

最新问答