javascript - Redux - 一个 vs 多个 reducer

Question

我来自 Elm 社区，在 Elm 中，每个应用程序都有其 View 、模型和状态，并且基本上采用与 redux 非常相似的方法来解决问题，IMO。

无论如何，我发现自己正在为多个 reducer 的想法而苦苦挣扎。在 Elm 中，我习惯为所有操作(消息)创建一个单独的文件，为“ react ”( View )创建一个单独的文件，为状态(模型)创建一个单独的文件，为所有 reducer (更新)创建一个单独的文件。

每个可能的操作都包含在更新文件中，更新文件不能分布在多个文件中，将所有逻辑放在一个地方。

另一方面，Redux 鼓励为 reducer 创建多个单独的文件，然后将它们与 combineReducers 组合，我发现这非常令人困惑，或多或少是一个缺点而不是优点。

如果我做对了，每个 reducer 只会得到它“负责”的部分，并且能够用它做一些事情，不同的 reducer 不能访问其他 state-property/其他 reducer 的属性。

这样做的缺点 IMO:

1. reducer A 的函数可能需要 reducer B 的相关信息，但因此无法访问。
2. 更多文件会导致更多困惑和意外错误。
3. 不必要的代码拆分。 ...

拆分代码的优点是什么，或者我在这里没有看到什么？

Answer 1

在 Dan Abramov 发现这个话题并写下另一个惊人的答案之前，我会尝试解释 :-)

缺点:

Function from reducer A may need info about information from reducer B, but cannot be accessed because of this.

这个问题并没有真正发生，因为reducer应该如何组合完全取决于你。如果 reducer 只对状态树的一部分感兴趣，那么 combineReducers 将确保它只接收该部分。但是，如果它需要更多状态，那么您将以接收整个状态的方式应用这个特定的 reducer 。

整个应用程序最终将只有一个 reducer——一个处理整个状态和所有操作的 reducer——但你可能希望在某个时候将你的应用程序代码拆分为与主题相关的模块，所以编写更小的与主题相关的 reducer 并将它们组合成一个更容易。 combineReducers 只是一个帮助程序，可让您在需要时方便地执行此操作。

2. More files lead to more mess and unintentional errors.
3. Unnecessary code splitting. ...

由您决定何时拆分代码。我喜欢在不同的文件中保留不相关的功能。例如，如果我的 Web 应用程序有一个聊天模块，我可能会制作一个 chat 包并将所有与聊天相关的代码放在那里——一个 View 、一堆操作和理解这些操作的 reducer .

---

继续前进:

combineReducers 很有用，因为它非常适合可重用的应用程序。例如，我可以编写一个处理评论的模块......其中一部分将是一个缩减器，如:

const initialState = {
  commentList: [],  // list of { author, text, upvotes }
  commentingAllowed: true,
}

function commentReducer(state, action) {
  if (typeof state === 'undefined') {
    return initialState;
  }
  switch (action.type) {
    // ...
  }
}

但我的应用程序的实际状态可能更复杂，例如:

{
  currentArticle: {
    title: "Some article",
    published: "2017-04-05",
    author: "someone",
    comments: {
      commentList: [],
      commentingAllowed: true,
    }
  }
}

评论状态嵌套在 currentArticle 下，但我的评论应用程序(特别是 commentReducer 不知道文章的整个概念!所以我不想要它接收整个状态 - 它不知道如何处理它。我希望这个 reducer 只接收与其评论相对应的状态部分。

请注意，我可以一次拥有很多文章，也可能有其他可评论的东西。通过巧妙地组合 reducer，您可以拥有评论应用程序的多个“实例”，每个实例只处理自己的一小部分状态。这需要比单独使用 combineReducers 更智能的胶水代码，但它显示了当 reducer 只需要应用程序状态的特定部分时很自然的情况 - 关注点分离。