redux 工具包中的 extraReducers 未捕获操作

Question

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import request from '../../utils/request';

export const fetchReports = createAsyncThunk(
  'reports/fetchReports',
  async (Criteria, thunkAPI) => {
    const url = '/fetchReport';
    const options = { method: 'POST', data: { Criteria: { ...Criteria } } };
    const response = await request(url, options);
    return response.ReportData;
  },
);

export const clinicReportsSlice = createSlice({
  name: 'reports',
  initialState: {
    reports: {}
  },
  reducers: {
  },
  extraReducers: {
    [fetchReports.fulfilled]: (state, action) => {
      console.log("INFO: Action Called!!") ---------------> not able to see this log
    },
  },
});

export default clinicReportsSlice.reducer;

因此，我可以看到在开发工具内部调用了“reports/fetchReports/fulfilled”操作。但不幸的是对我来说，它不是在 extraReducers 中

我什至尝试过对操作名称进行硬编码，这显然不会产生任何影响。但我还是尝试了。

'reports/fetchReports/fulfilled': () => {
      console.log('asdf');
 },

您能想到它不起作用的任何可能原因吗？

我的配置是这样的，现有代码需要没有任何错误才能工作。

export const store = configureStore({
  reducer: allReducers,
  middleware: (getDefaultMiddleware) => {
    console.log(getDefaultMiddleware().concat(apiMiddleware));
    return [getDefaultMiddleware()[1], apiMiddleware];
  },
});

Answer 1

当存在具有相同 typePrefix 的重复 asyncthunk 时，我遇到了这个问题。

您能否确认没有其他 asyncthunk 使用相同的操作类型“reports/fetchReports”？