Redux - One vs Multiple reducers

时间:2017-05-04 08:05:47

标签: javascript redux react-redux elm

我来自Elm-comunity和Elm,每个应用程序都有自己的观点,模型和状态,并且基本上采用非常类似的方法,即IMO,以解决REDx的问题。

无论如何,我发现自己正在努力解决多个减速器的问题。在Elm中,我习惯为所有动作(消息)创建一个单独的文件,一个单独的文件用于"反应" (View),一个单独的状态(Model),另一个用于所有reducers(Update)。

更新文件中包含每个可能的操作,更新文件无法通过多个文件传播,将所有逻辑保存在一个位置。

另一方面,Redux鼓励为Reducer制作多个单独的文件,然后将它们与combineReducers结合使用,我发现这些文件非常混乱,或多或少是一个缺点而不是优势。

如果我把事情做对了,每个减速器只会得到它负责的部分" for和能够用它做某事,不同的Reducer无法访问其他reducer的其他状态属性/属性。

做这个IMO的缺点:

  1. 减速机A的功能可能需要有关减速机B的信息,但由于这个原因无法访问。
  2. 更多文件会导致更多混乱和无意的错误。
  3. 不必要的代码拆分。 ...
  4. 分割代码的优点是什么,或者我在这里没有看到什么?

1 个答案:

答案 0 :(得分:9)

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

缺点:

  

减速器A的功能可能需要有关减速器B的信息,但由于这个原因无法访问。

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

整个应用程序最终只有一个reducer - 一个处理整个状态和所有操作 - 但你可能希望在某个时候将你的应用程序代码拆分成与主题相关的模块,所以编写较小的与主题相关的缩减器更容易,并将它们组合成一个。 combineReducers只是一个帮助,可以让你在需要时方便地做到这一点。

  
      
  1. 更多文件会导致更多混乱和无意的错误。
  2.   
  3. 不必要的代码拆分。 ...
  4.   

由您决定何时拆分代码。我喜欢在不同的文件中保留不相关的功能。例如,如果我的网络应用程序有一个聊天模块,我可能会制作一个chat包,并将所有与聊天相关的代码放在那里 - 一个视图,一堆操作和理解这些操作的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单独更聪明的胶水代码,但它显示了一种情况,当减速器自然只需要应用程序状态的特定部分时 - 关注点分离。