React与Redux Toolkit：如何在其他Action完成后派发Action？

你遇到的核心问题是：React Hook（比如useAppDispatch）只能在React组件或自定义Hook的顶层调用，而createAsyncThunk的回调是普通异步函数，不属于React组件范畴，所以在这里用Hook会报错。下面给你两种可行的解决方案：

方案一：在Async Thunk内部通过thunkAPI派发Action #

createAsyncThunk的回调函数第二个参数是thunkAPI对象，里面自带dispatch方法，不需要依赖React Hook。直接解构使用即可：

export const deleteSelectedEntry = createAsyncThunk(
  'entries/delete/selected',
  async (id: string, { dispatch }) => { // 从thunkAPI中解构dispatch
    const response = await BackendService.deleteEntry(id);
    // 直接派发Snackbar的Action
    dispatch(setSnackBarState({
      state: true,
      message: "SUCCESS DELETING"
    }));
    return response.data;
  }
);

这种方式的好处是：只要调用这个Thunk，成功后都会自动触发Snackbar，不需要在每个调用的组件里重复写逻辑。

方案二：在调用Thunk的组件中处理成功回调 #

如果希望不同组件调用这个删除操作时，有不同的提示逻辑，可以在组件里通过unwrapResult获取Thunk的执行结果，再手动派发Snackbar的Action：

// 组件内部
const dispatch = useAppDispatch();

const handleDelete = async (entryId: string) => {
  try {
    // 调用Thunk并等待成功结果
    await dispatch(deleteSelectedEntry(entryId)).unwrap();
    // 成功后派发Snackbar的Action
    dispatch(setSnackBarState({
      state: true,
      message: "SUCCESS DELETING"
    }));
  } catch (error) {
    // 处理删除失败的情况（比如显示错误提示）
    dispatch(setSnackBarState({
      state: true,
      message: "DELETE FAILED"
    }));
  }
};

关于extraReducers的说明 #

你之前尝试在extraReducers里处理，但Redux的reducer必须是纯函数，不能在里面执行dispatch这类副作用操作，所以这种方式不可行。extraReducers的作用只是根据Thunk的状态（pending/fulfilled/rejected）更新当前slice的状态，不能触发其他Action。

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