具有依赖关系的多次调用 redux-thunk

Question

问题：

我使用 redux-thunk 并且我想接收帖子。要接收帖子，我需要获得用户。所以我对我的thunk有疑问，一个thunk中获取所有数据是否正确，如果不是如何将它分成两个thunk？

Thunk 示例：

export default group_id => {
  return async dispatch => {
    const users = await API.get(`/users?group_id=${group_id}`) // get users
    const posts = await axios.all([...getPosts(users)]) // get all posts by user ids
    dispatch(loadUsersAction(users))
    dispatch(loadPostsAction(posts))
  }
}

Answer 1

根据您的要求，可能有多种方法。

如果目的是加载，最初是用户，然后是他们的 post，我会先调用 /users，然后派遣另一个动作创建者来获取他们的 /posts。因为将它们放在一起会使您的用户等待更长时间以等待 UI 中的某些更改（例如：加载微调器），因此我会将它们分成两个单独的操作。

export function getUsers(group_id) => {
  return async dispatch => {
    const users = await API.get(`/users?group_id=${group_id}`); 
    dispatch(loadUsersAction(users));
    return users;
  };
};

export function getPostForGroupUsers (group_id) => {
  return async dispatch => {       
    const users = await dispatch(getUsers(group_id));
    const posts = await axios.all([...getPosts(users)]);
    dispatch(loadPostsAction(posts));
    return posts;
  }
}

// or just call users, dispatch and get them from store

export function getPostForAllUsers  () => {
  return async dispatch => {       
    // this depends on your implementation
    const users = getFromReduxStore('users');
    const posts = await axios.all([...getPosts(users)]);
    dispatch(loadPostsAction(posts));
    return posts;
  }
}

也许你可以提供更多的案例细节，我可以给出更准确的答复。

具有依赖关系的多次调用 redux-thunk

Multiple calls with dependencies redux-thunk

javascript

reactjs

redux

redux-thunk

react-redux