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

Posted 2023-02-22

【中文标题】具有依赖关系的多个调用 redux-thunk

【英文标题】：Multiple calls with dependencies redux-thunk

【发布时间】：2020-05-05 18:02:32

【问题描述】：

问题：

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

Tunk 示例：

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))
  

【问题讨论】：

这不是一个中间件，而是一个 thunk。中间件是你传递给applyMiddleware

的东西

【参考方案1】：

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

如果目的是加载，首先是用户，然后是他们的帖子，我会先调用/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;
  

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

【讨论】：

您正在等待 thunk getUsers 函数，而不是在 getPostForGroupUsers 中调度它

@HassanGilak 是正确的，应该是await dispatch(getUsers(group_id))

要补充一点，我个人是 thunk 的粉丝，而你的交织并不复杂，但一旦你达到这种水平，我会更强烈地提倡侧库。