React+Redux报错：Actions must be plain objects及await执行顺序需求解决

我来帮你一步步排查并解决这个问题～

问题根源分析 #

你遇到的「Actions must be plain objects. Use custom middleware for async actions.」报错，核心原因出在clinicAdd这个action创建函数的写法上：

• 你给最外层的函数加了async，这会让clinicAdd直接返回一个Promise对象，而不是Redux Thunk要求的「返回函数的action创建器」。Redux会把这个Promise当成普通action处理，自然触发报错。
• 另外，原写法里clinicAdd返回的函数没有返回Promise，导致你在onPress里用await其实不会等待异步操作完成，secondFun会提前执行，达不到预期效果。

解决方案 #

1. 修正clinicAdd的写法 #

去掉外层的async，把async加在返回的dispatch函数上，让这个函数返回Promise，这样await才能生效。同时用try/catch替代then/catch，代码逻辑更清晰：

// REDUX
export const clinicAdd = (name, address, semester, pay) => async (dispatch) => {
  dispatch({ type: CLINIC_ADD });
  try {
    // 等待axios请求完成
    const response = await axios.post('myURL', { name, address, semester, pay }, config);
    // 处理成功逻辑
    clinicAddSuccess(dispatch, response.data);
  } catch (error) {
    // 处理失败逻辑
    clinicAddFail(dispatch);
  }
};

// 这两个函数没有异步操作，不需要加async
const clinicAddSuccess = (dispatch, data) => {
  console.log("Success");
  dispatch({ 
    type: CLINIC_ADD_SUCCESS, 
    payload: data 
  });
};

const clinicAddFail = (dispatch) => {
  console.log("Fail");
  dispatch({ type: CLINIC_ADD_FAIL });
};

2. 保持onPress逻辑不变（已满足需求） #

你的onPress写法本身没问题，只要clinicAdd返回的是Promise，await就会等待所有异步操作完成后，再执行secondFun：

onPress = async(e) => {
  e.preventDefault();
  const {name, address, payment, semester} = this.props;
  // 现在会等待clinicAdd的异步操作全部完成
  await this.props.clinicAdd(name, address, semester, payment);
  this.secondFun();
};

关键知识点回顾 #

• Redux Thunk的核心是允许action创建器返回函数（而非普通对象），这个函数可以接收dispatch和getState作为参数。
• 如果要让异步action能被await，需要让返回的函数是async函数（或者手动返回Promise），这样外部才能等待它执行完成。

内容的提问来源于stack exchange，提问作者ლევან სარიშვილი