如何在特定Reducer触发后，在extraReducer中调用RTK Query查询？

你当前的写法存在核心问题：Redux的Reducer（包括extraReducer）必须是纯函数，不能在里面执行副作用操作（比如触发API请求）。api.endpoints.queryName.initiate()会创建一个查询Thunk，但Reducer里既不能dispatch这个Thunk，也不允许包含这类非纯逻辑，这违反了Redux的状态更新规则。

下面是两种可行的解决方案：

方案一：在触发清除动作的位置同步触发查询 #

直接在组件或触发onClearOrderListingFilters的地方，同时调用查询方法：

import { useDispatch } from 'react-redux';
import { onClearOrderListingFilters } from './ordersSlice';
import { useLazyQueryNameQuery } from './apiSlice';

function ClearFiltersButton() {
  const dispatch = useDispatch();
  const [triggerQuery] = useLazyQueryNameQuery();

  const handleClear = () => {
    // 先重置过滤器状态
    dispatch(onClearOrderListingFilters());
    // 立即触发查询
    triggerQuery({
      filterArgs: {
        offset: 0,
        limit: 10,
        sorting: [{ field_name: '', sort_by: '' }],
        search: [{ key: '', value: '' }],
      },
    });
  };

  return <button onClick={handleClear}>清除过滤器</button>;
}

方案二：用ListenerMiddleware监听动作自动触发查询 #

如果希望onClearOrderListingFilters动作触发后自动执行查询，可以使用RTK内置的listenerMiddleware来监听动作并执行副作用：

1. 配置Store时添加ListenerMiddleware：

import { configureStore, createListenerMiddleware } from '@reduxjs/toolkit';
import { api } from './apiSlice';
import ordersReducer, { onClearOrderListingFilters } from './ordersSlice';

// 创建监听器中间件
const listenerMiddleware = createListenerMiddleware();

// 添加监听器：监听清除过滤器动作
listenerMiddleware.startListening({
  actionCreator: onClearOrderListingFilters,
  effect: async (_, listenerApi) => {
    // 触发查询请求
    await listenerApi.dispatch(
      api.endpoints.queryName.initiate({
        filterArgs: {
          offset: 0,
          limit: 10,
          sorting: [{ field_name: '', sort_by: '' }],
          search: [{ key: '', value: '' }],
        },
      })
    );
  },
});

export const store = configureStore({
  reducer: {
    orders: ordersReducer,
    [api.reducerPath]: api.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware()
      .concat(api.middleware)
      .prepend(listenerMiddleware.middleware),
});

这样，每当onClearOrderListingFilters被dispatch时，监听器会自动触发查询，无需在组件中手动调用。

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