如何用Redux createListenerMiddleware监听asyncThunk的fulfilled动作？

完全可行。createAsyncThunk会自动生成pending、fulfilled、rejected三种标准Redux action类型，这些动作和你用createSlice定义的同步action一样，都能被createListenerMiddleware监听。

具体实现示例 #

1. Slice中定义异步Thunk（示例代码）

// MyAction-slice.ts
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

// 定义异步Thunk
export const myAsyncAction = createAsyncThunk(
  'mySlice/myAsyncAction',
  async (payload: any) => {
    // 这里写异步逻辑，比如API请求
    const res = await fetch('/api/target-data');
    return res.json();
  }
);

const mySlice = createSlice({
  name: 'mySlice',
  initialState: { data: null, loading: false },
  reducers: {
    // 同步action
    myAction: (state) => {
      // 同步状态更新逻辑
    }
  },
  extraReducers: (builder) => {
    builder
      .addCase(myAsyncAction.fulfilled, (state, action) => {
        state.data = action.payload;
        state.loading = false;
      })
      .addCase(myAsyncAction.pending, (state) => {
        state.loading = true;
      });
  }
});

export const { myAction } = mySlice.actions;
export default mySlice.reducer;

2. 在Store中监听fulfilled动作

// store.ts
import { configureStore, createListenerMiddleware } from '@reduxjs/toolkit';
import myReducer from './MyAction-slice';
import { myAsyncAction, myAction } from './MyAction-slice';

const listenerMiddleware = createListenerMiddleware();

// 监听异步action的fulfilled状态
listenerMiddleware.startListening({
  actionCreator: myAsyncAction.fulfilled,
  effect: async (action, listenerApi) => {
    // 这里写监听触发后的逻辑，比如打印结果、触发其他action等
    console.log('异步操作完成，返回数据：', action.payload);
    // 示例：触发其他同步action
    // listenerApi.dispatch(myAction());
  }
});

// 原来的同步action监听逻辑
listenerMiddleware.startListening({
  actionCreator: myAction,
  effect: (action) => {
    console.log('同步action触发');
  }
});

export const store = configureStore({
  reducer: {
    mySlice: myReducer
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().prepend(listenerMiddleware.middleware)
});

注意点 #

• 确保正确导入myAsyncAction，并使用其.fulfilled属性作为actionCreator传入startListening，这样就能精准捕获异步操作完成的动作。
• 监听的effect函数支持异步逻辑，你可以在这里执行任何后续操作，比如调用其他服务、触发额外的Redux action等。

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