RTK Query缓存返回时，如何在Redux内完成Action派发？

方案1：监听RTK Query的缓存命中Action #

RTK Query在命中缓存时会派发cacheHit类型的Action，你可以在createSlice的extraReducers中同时监听matchFulfilled和matchCacheHit两个匹配器，覆盖新请求成功和缓存返回两种场景，触发自定义Action的派发。

示例代码：

const authSlice = createSlice({
  name: 'auth',
  initialState: {},
  extraReducers: (builder) => {
    builder
      // 处理新请求成功的情况
      .addMatcher(api.endpoints.login.matchFulfilled, (state, action) => {
        dispatch(yourCustomAction(action.payload));
      })
      // 处理缓存命中的情况
      .addMatcher(api.endpoints.login.matchCacheHit, (state, action) => {
        dispatch(yourCustomAction(action.payload.data));
      });
  },
});

注意：matchCacheHit的Action payload结构和matchFulfilled略有差异，缓存命中的实际数据通常在payload.data字段中，需根据你的业务结构调整。

方案2：使用onQueryStarted生命周期函数 #

在定义API endpoint时，通过onQueryStarted配置项绑定逻辑——这个函数会在每次调用Query/Mutation时执行，不管是发起新请求还是读取缓存，都能触发。你可以在这里直接派发自定义Action，逻辑和API请求绑定更紧密。

示例代码：

const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: (builder) => ({
    login: builder.query({
      query: (credentials) => ({ url: 'login', method: 'POST', body: credentials }),
      onQueryStarted: async (arg, { dispatch, queryFulfilled }) => {
        // 缓存或新请求场景都会执行这里的逻辑
        const { data } = await queryFulfilled;
        dispatch(yourCustomAction(data));
      },
    }),
  }),
});

方案3：自定义缓存订阅（进阶） #

如果需要更细粒度的缓存控制，可以利用RTK Query的缓存订阅功能，在API初始化后订阅特定endpoint的缓存变化，当缓存条目被访问或更新时派发Action。这个方法适合有特殊缓存监听需求的场景：

// 在API初始化后执行订阅
const cacheSubscription = api.util.subscribeCacheEntry(
  'login', // 目标endpoint名称
  { credentials: 'xxx' }, // 对应的查询参数
  (entry) => {
    // 缓存条目被访问或更新时触发
    if (entry.data) {
      dispatch(yourCustomAction(entry.data));
    }
  }
);

// 记得在不需要时取消订阅（比如组件卸载时）
// cacheSubscription.unsubscribe();

内容的提问来源于stack exchange，提问作者16tea