reactjs - 如何在Redux Action Creator中通过多个请求获取数据,然后将收集到的数据发送到Reducer?

标签 reactjs asynchronous redux middleware

我正在使用 twich api 获取一些基本 channel 信息并检查相关 channel 是否正在流式传输。

我必须发出两个单独的请求才能收集这些数据。

我想用 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 转换为 reducer 的普通 obj,我无法发送带有两个 Promise 的数组作为有效负载。

我如何调整此代码以将两个请求结果发送到reducer以将我的状态更新为普通obj而不是promise obj?或许可以用 redux-thunk 来解决? 我想指出的是,我在这件事上是全新的,所以我想请求宽容:)

最佳答案

好消息是您可以在有效负载中设置任何内容(包括对象)。所以这会很方便:

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

关于reactjs - 如何在Redux Action Creator中通过多个请求获取数据,然后将收集到的数据发送到Reducer?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43747966/

相关文章:

javascript - 以 Redux 形式动态加载 initialValues

node.js - react 路由器将变量/状态传递给新路由?

redux dispatch 多次触发

javascript - 无法从 Redux 获取值到 props

javascript - 如何为react-big-calendar(fullcalendar.js)设置momentLocalizer(moment.js)?

reactjs - Relay + React 的测试策略

Python:如何将外部队列与 ProcessPoolExecutor 一起使用?

c# - 抑制来自空异步方法的警告

ios - 在 Swift 中异步改变集合的惯用方法

reactjs - redux-saga-test-plan 中 testSaga 和 ExpectSaga 的区别