惯用的 Redux：调度多个动作答案

【问题标题】：Idiomatic Redux: Dispatch more than one action惯用的 Redux：调度多个动作
【发布时间】：2016-07-23 18:38:39
【问题描述】：

我有一个显示帖子列表的 Redux 应用程序。状态或多或少是这样的：

{
  posts: [
    {id: 1, title: 'My Post'},
    {id: 2, title: 'Also this one'},
    {id: 3, title: 'Other Post'}
  ],
  visible_post_ids: [1, 2]
}

每当我加载一些帖子时，我都会将它们添加到posts，然后我会替换visible_post_ids 的内容。

这是我用于加载帖子的操作创建器：

function loadPosts (filters) {
  return function (dispatch, getState) {
    return fetch(`/posts.json?filters=${filters}`)
      .then((response) => response.json())
      .then((posts) => {
        dispatch(postsLoaded(posts)) // Will update `posts`
        const postIds = posts.map((post) => post.id)
        dispatch(updateVisiblePosts(postIds)) // Will update `visible_post_ids`
      })
  }
}

我的问题是：从 thunk 发送两个（或更多）事件是否符合习惯？还是我应该只派出一个并在各种减速器中处理它？

【问题讨论】：

标签： redux redux-thunk

【解决方案1】：

快速回答：从一个 thunk 调度两个或多个动作没有问题，我认为这是一个很好的做法，特别是如果 API 调用响应包含两个完全不同的问题的答案。

我认为这取决于您要表示的内容，在您的情况下，您可以有一个表示添加新帖子的操作，并且两个不同的减速器可以捕获它并使用它执行不同的任务。但是您可以将其视为两个不同的操作（您的示例），这也很棒。

正如 Sergey L 所说，在您的情况下，通过一个独特的操作（对于您的情况），它可以创建一个有趣的“依赖关系”

【讨论】：

【解决方案2】：

如果您不考虑可以在不调用 updateVisiblePosts 的情况下进行 postLoaded 的情况，最好只在 postsLoaded 中处理状态更改。特别是如果您需要它们同步。例如，如果您需要一个 visible_post_ids 不包含来自不存在/加载的帖子的 ID 的受让人。此外，它最大限度地减少了更新，因为每次调度都会导致 React 中的处理。

另一方面，将这些动作分开可以使代码更加清晰，因为每个动作的实现都非常简单。

【讨论】：