Javascript 具有依赖项的多个调用redux 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))
  }
}

我使用并希望收到帖子。要接收帖子，我需要获得用户。所以我对我的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))
  }
}

---

根据您的需求，可能有几种方法

如果目的是先加载用户，然后加载他们的帖子，我会首先调用

/users

，然后发送另一个操作创建者来获取他们的

/posts

。 因为把它们放在一起会让用户在UI中等待更改的时间更长（例如：加载微调器），因此我将把它们分为两个单独的操作

导出函数getUsers（组id）=>{
返回异步调度=>{
const users=wait API.get（`/users？group_id=${group_id}`）；
调度（loadUsersAction（用户））；
返回用户；
};
};
导出函数getPostForGroupUsers（组id）=>{
返回异步调度=>{
const users=等待调度（getUsers（group_id））；
const posts=等待axios.all（[…getPosts（用户）]；
派送（装载邮递（邮递））；
返回岗位；
}
}
//或者直接打电话给用户，派送他们到商店去
导出函数getPostForAllUsers（）=>{
返回异步调度=>{
//这取决于您的实现
const users=getFromReduxStore（“用户”）；
const posts=等待axios.all（[…getPosts（用户）]；
派送（装载邮递（邮递））；
返回岗位；
}
}

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

applyMiddleware

的东西，您正在等待thunk getUsers函数，而不是将其分派进来getPostForGroupUsers@HassanGilak是正确的，应该是

wait dispatch（getUsers（group_id））

需要补充的一点是，我个人是thunks的粉丝，而你的纠缠并不复杂，但是，一旦你达到了这种水平，我会大力提倡建立一个侧库。