如何在thunk内将RTKQuery mutation状态重置回uninitiated
问题描述
我有一个用于向服务器提交数据的RTKQuery mutation,该mutation配置使用了fixedCacheKey,我在thunk中通过.initiate()方法触发它,代码如下:
dispatch( commentsApi.endpoints.updateComment.initiate( { commentId, patch }, { fixedCacheKey: getFixedCacheKey(commentId) } ) )
我需要在自定义thunk action中通过编程手段将该mutation的状态重置回status: "uninitialized"。
我已知useMutation钩子会返回reset函数,该函数的效果正好符合需求,但我需要在thunk中实现同等重置效果。我尝试编写了如下代码但无法正常运行,控制台报错commentsApi.endpoints.updateComment.reset is not a function:
// 这段代码无法正常运行 dispatch( commentsApi.endpoints.updateComment.reset({ fixedCacheKey: getFixedCacheKey(commentId) }) )
请问该如何正确实现thunk场景下的RTKQuery mutation状态重置需求?
解决方案
commentsApi.endpoints.updateComment.reset本身不存在,RTK Query并没有把reset方法直接挂载到endpoint定义上。在thunk、非React组件场景下重置指定fixedCacheKey的mutation状态,需要使用api实例自带的util.resetMutationState工具方法,这也是useMutation返回的reset函数底层调用的同名action creator。
正确实现代码如下:
dispatch( commentsApi.util.resetMutationState({ fixedCacheKey: getFixedCacheKey(commentId), // 如果需要同时清除该mutation对应的缓存条目,可以开启以下配置 // removeCacheEntry: true }) )
补充说明:
- dispatch该action后,对应fixedCacheKey的mutation状态会立刻回到
status: "uninitialized"初始态,和组件内调用reset的效果完全一致 - 如果你使用的是未指定fixedCacheKey的组件级mutation实例,可以传入
requestId参数定位要重置的对应mutation请求 - 配置
removeCacheEntry: true会同步删除该mutation对应的缓存记录,适合需要完全清空本次提交残留数据的场景
内容的提问来源于stack exchange,提问作者Michal Kurz
相关产品推荐
相关产品推荐

