Question

我有两个动作文件。 book_actions.js和author_actions.js。他们也有自己的reducers文件。

获取作者时，它会向我返回一本书的ID列表。然后，我想拿走所有这些书。

author_actions.js
export const fetchAuthorAndBooks = (authorId) => (dispatch: Dispatch) => {
fetchAuthor(authorId).then((author) => {
  author.bookIds.each((id) => {
      dispatch(fetchBook(id))
  })  
});

}

我想等待作者和书籍提取完成之后再在屏幕上呈现任何内容。为了适应这个，我要去在每个reducer状态上添加一个加载标志。然后，当什么都没有加载时，使用返回的所有数据渲染组件

这是处理不同操作文件上的多个异步调用的正确方法吗？在每个reducer中添加loading属性似乎是错误的只是为了这个。我应该在author_actions.js还是分派这些操作的容器组件中进行此操作？

Answer 1

我会检查您所使用的API是否具有诸如authors/:id/books之类的端点。如果作者拥有100本书，那么我认为进行100次API调用并不是很有效。像我描述的那样，应该有一个端点可以为作者返回所有书籍。

如果您无法访问这样的端点，另一种方法是尝试使用Promise.all之类的东西，它仅根据传递给它的多个Promise的结果返回一个Promise。也许您可以创建一个接受书id的数组的新方法：

function fetchAuthorBooks(ids) {
  return Promise.all(ids.map(id => axios.get(`/books/${id}`)))
}

用法：

fetchAuthorBooks(author.bookIds).then((books) => {
  // the array of books
}).catch((err) => {
  // one of the requests failed
})

希望这给您一些指导！我真的很想找出该端点是否可用。

结合具有独立减速器的多个异步操作

1 个答案: