如何在Redux-Toolkit reducer中调用react-query的invalidateQueries？

由于Redux reducer是纯函数，不能包含副作用操作，且无法直接访问React-Query的queryClient实例，你之前尝试在addMatcher的reducer逻辑里执行查询失效的思路本身不可行。下面提供两种实用的统一处理方案：

方案一：使用Redux自定义中间件（推荐） #

中间件是Redux中处理副作用的标准方式，它可以监听所有action，在action执行前后处理逻辑，同时能访问外部初始化好的queryClient。

步骤1：提前初始化并导出QueryClient #

在项目公共工具文件中创建并导出queryClient实例，方便在中间件中引用：

// src/utils/queryClient.js
import { QueryClient } from '@tanstack/react-query';

export const queryClient = new QueryClient({
  // 你的React-Query配置
});

步骤2：编写自定义失效中间件 #

在Redux store配置中添加中间件，匹配目标异步action的fulfilled状态，触发查询失效：

// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import { queryClient } from '../utils/queryClient';
import yourSliceReducer from './slices/yourSlice';
import asyncActions from './slices/asyncActions';

// 自定义中间件：监听目标fulfilled action并触发查询失效
const queryInvalidationMiddleware = (store) => (next) => (action) => {
  // 先让action正常流经Redux流程
  const result = next(action);

  // 定义需要触发失效的目标fulfilled action列表
  const targetFulfilledActions = [
    asyncActions.someAction1.fulfilled,
    asyncActions.someAction2.fulfilled,
    asyncActions.someAction3.fulfilled,
    asyncActions.someAction4.fulfilled,
  ];

  // 匹配action，触发对应查询失效
  if (targetFulfilledActions.some(actionCreator => actionCreator.match(action))) {
    // 失效指定queryKey的查询，可根据需求调整匹配规则
    queryClient.invalidateQueries({ queryKey: ['yourTargetQueryKey'] });
    // 如果需要批量失效多个查询，可使用模糊匹配
    // queryClient.invalidateQueries({ pattern: /^yourQueryPrefix/ });
    // 也可根据action.payload动态决定失效的查询
    // if (action.payload.type === 'specific') {
    //   queryClient.invalidateQueries({ queryKey: ['specificKey'] });
    // }
  }

  return result;
};

// 配置store并添加中间件
export const store = configureStore({
  reducer: {
    yourSlice: yourSliceReducer,
    // 其他reducer...
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(queryInvalidationMiddleware),
});

步骤3：确保React-Query Provider使用该实例 #

在项目入口文件中，用导出的queryClient配置QueryClientProvider：

// src/index.js
import { QueryClientProvider } from '@tanstack/react-query';
import { queryClient } from './utils/queryClient';
import { store } from './app/store';
import { Provider } from 'react-redux';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </Provider>,
  document.getElementById('root')
);

方案二：利用Redux Store的订阅机制 #

如果你不想新增中间件，可以通过Redux store的subscribe方法监听状态变化，结合中间件记录最近触发的action，再执行失效逻辑（但这种方式不如中间件直接）：

// src/index.js
import { store } from './app/store';
import { queryClient } from './utils/queryClient';
import asyncActions from './app/asyncActions';

// 先通过中间件记录最近的action
let lastAction = null;
store.subscribe(() => {
  if (lastAction) {
    const targetActions = [
      asyncActions.someAction1.fulfilled,
      asyncActions.someAction2.fulfilled,
      asyncActions.someAction3.fulfilled,
      asyncActions.someAction4.fulfilled,
    ];
    if (targetActions.some(actionCreator => actionCreator.match(lastAction))) {
      queryClient.invalidateQueries({ queryKey: ['yourTargetQueryKey'] });
    }
  }
});

// 新增记录action的中间件
const actionLoggerMiddleware = (store) => (next) => (action) => {
  lastAction = action;
  return next(action);
};

// 把这个中间件加入store配置（和方案一的方式相同）

关键注意点 #

• Redux reducer必须保持纯函数，任何副作用操作（如API调用、查询失效）都应该放在中间件、thunk或saga中处理。
• 可以根据实际业务需求，调整invalidateQueries的参数，比如指定单个queryKey、使用正则匹配多个key，或者根据action.payload动态决定失效范围。

内容的提问来源于stack exchange，提问作者james emanon