React中如何在dispatch异步Thunk的reducer完成后执行操作？

你当前的写法其实已经能实现需求，下面结合不同场景给出具体说明：

1. 直接利用dispatch返回的Promise（最简单方式） #

createAsyncThunk生成的thunk函数，dispatch后返回的Promise会在对应的fulfilled action被reducer处理完成、store状态更新完毕之后才resolve。所以你现在写的then回调代码，本身就是在reducer完成更新后执行的：

dispatch(fetchData(...)).then(() => {
  // 此处代码可安全访问更新后的store状态
  // 比如React组件中可通过useSelector获取最新的state.data
})

如果实际运行未达预期，大概率是其他逻辑时序问题，而非该写法本身的问题。

2. React组件中通过状态监听触发操作 #

如果是在React组件内，可通过监听目标状态的变化来执行后续操作，比如监听loading从true变为false，或者data更新：

const { data, loading } = useSelector(state => state.appInvoice);

useEffect(() => {
  // 当loading切换为false且data存在时执行操作
  if (!loading && data) {
    // 写reducer更新后需要执行的逻辑
  }
}, [loading, data]);

这种方式适合依赖最新状态值才能执行的场景。

3. 使用Redux监听中间件（全局场景） #

如果需要在全局层面监听fetchData.fulfilled action（无论哪个组件触发都执行逻辑），可以用Redux Toolkit的createListenerMiddleware：

先创建监听中间件并注册到store：

// store.js
import { configureStore, createListenerMiddleware } from '@reduxjs/toolkit';
import { fetchData } from './invoiceSlice';
import invoiceReducer from './invoiceSlice';

const listenerMiddleware = createListenerMiddleware();

// 监听fetchData.fulfilled动作
listenerMiddleware.startListening({
  actionCreator: fetchData.fulfilled,
  effect: (action, listenerApi) => {
    // 此处代码会在reducer处理完该动作后执行
    const latestState = listenerApi.getState();
    // 编写全局逻辑
  },
});

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

这种方式适合跨组件的全局逻辑处理。

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