如何在Redux action creator中使用多个请求获取数据,然后将收集的数据发送到reducer?

时间:2017-05-02 22:03:42

标签: reactjs asynchronous redux middleware

我正在使用twich api获取一些基本的频道信息,并检查相关频道是否正在流媒体。

我必须提出两个separte请求来收集这些数据。

我想用这样的axios做到这一点:

export function fetchUser(user_id) {
  const get_user = `${ROOT_URL}/users/${user_id}?client_id=${CLIENT_ID}`;
  const get_stream = `${ROOT_URL}/streams/${user_id}?client_id=${CLIENT_ID}`;

  function getUserInfo() {
    return axios.get(get_user);
  }

  function getUserStream() {
    return axios.get(get_stream);
  }

  axios.all([getUserInfo(), getUserStream()])
    .then(axios.spread(function (infos, streams) {
      //WHAT TO DO HERE?
    }));

  return {
    type: FETCH_USER,
    payload: req,
  };
}

问题是redux-promis-middleware只将一个Promise obj转换为简化obj for reducer,我不能发送带有两个promise作为有效负载的数组。

如何调整此代码以将请求结果发送到reducer以更新我的状态为plain obj而不是promise obj? Mybe不知何故用redux-thunk? 我想要指出,我在这件事上是全新的,所以我想请求放纵:)

1 个答案:

答案 0 :(得分:1)

好消息是你可以在有效载荷中设置任何东西(包括一个物体)。所以这会很方便:

return {
    type: FETCH_USER,//change constant here with appropriate action type
    payload: {infos:infos,streams:streams}
};