React-Redux新手求助：如何同时执行多个action？

Hey there! Let's walk through your problem and fix it together. First, let's clarify two key points upfront:

• You are already using React-Thunk (since your action creator returns an async function that receives dispatch as an argument) — that's exactly what Thunk is designed for: letting you write async logic in action creators and dispatch multiple actions as needed.
• Your core approach to dispatching multiple actions in one async flow is correct in theory, but there are small bugs in your code causing the first action's result to be lost or not show up.

首先，定位导致状态丢失的问题 #

Let's break down the critical issues in your code:

1. Action Creator拼写错误

In dispatchmessages, you misspelled payload as paylod — this means your reducer can't access the correct data to update the state:

// 错误写法
export const dispatchmessages = paylod => ({ 
  type : GETTALLMESSAGE, paylod 
}) 

// 正确写法
export const dispatchmessages = payload => ({ 
  type: GETTALLMESSAGE, payload 
})

2. Reducer逻辑错误

Your Annonce reducer has two problematic parts:

• Initial state is set to an empty string "", but the default case returns an empty array [] — this resets the state to an array on any unrecognized action, which could overwrite your GETALLANNONCE result.
• You're referencing Annoce.GETALLANNONCE instead of the direct GETALLANNONCE constant (assuming Annoce is a typo or incorrect import).

修正后的Annonce reducer：

// 初始状态设为空数组，符合列表数据的预期结构
const initialAnn = [];
export const Annonce = (state = initialAnn, action) => {
  switch(action.type){
    case GETALLANNONCE: 
      return action.payload; // 直接返回获取到的列表数据
    case GETONEANNONCE: 
      return [action.payload]; // 包裹成数组，保持状态结构一致性
    default: 
      return state; // 不要重置状态，返回原state即可
  }
}

3. 冗余的Promise包装

Axios's get method already returns a Promise, so wrapping it in new Promise() is unnecessary — we can simplify this code:

export const getmessagesss = (id) => { 
  return async (dispatch) => { 
    // 直接使用Axios.get返回的Promise，无需额外包装
    const promise1 = Axios.get(`${URL}app/allannonce`);
    const promise2 = Axios.get(`${URL}app/getmessage/${id}`);
    
    // 解构Promise.all的结果，让代码更清晰
    const [annonceRes, messageRes] = await Promise.all([promise1, promise2]);
    
    dispatch(getallanonces(annonceRes.data));
    dispatch(dispatchmessages(messageRes.data));
  }
}

关于“一次dispatch执行多个action”的说明 #

In React-Redux (with Thunk), you don't need a special "single dispatch" for multiple actions — you can just call dispatch multiple times in sequence inside your async action creator, like you're doing. The key to making this work is ensuring:

• Your action creators return valid action objects (with correct type and payload values).
• Your reducers correctly handle each action type and update the state without overwriting unrelated parts of the store.

If you wanted to encapsulate multiple actions into a single reusable call (though it's not necessary here), you could create a wrapper action creator:

export const fetchInitialData = (id) => async (dispatch) => {
  await dispatch(getmessagesss(id));
  // 可以在这里添加更多dispatch调用，比如其他初始化相关的actions
}

验证修复后的流程 #

After applying these fixes:

1. When componentDidMount calls this.props.getmessagesss, Thunk allows the async function to execute.
2. Both API calls run in parallel via Promise.all.
3. Once both responses are received, you dispatch getallanonces and dispatchmessages in sequence.
4. Each reducer picks up its respective action and updates the state correctly.

You should now see both sets of data in your Redux store without one overwriting the other.

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