在reducer中的redux存储中添加功能是否是反模式?

Chr*_*ian 1 javascript reactjs redux

说我有一个连接到redux存储的组件。在此商店中,有一个对象列表。例如这样的事情:

ReduxStore: {
    dataList: [
      {name:'bla'},
      {name:'blub'},
    ]
}
Run Code Online (Sandbox Code Playgroud)

在reducer中创建并添加filter函数以创建类似的东西实际上是一种反模式:

ReduxStore: {
   dataList: {
     data:[
      {name:'bla'},
      {name:'blub'}
     ],
     isNameAvailable: (name) => {/* search for name */}
   }
}
Run Code Online (Sandbox Code Playgroud)

效果很好,但是我不确定这是否是预期的方法。

Dan*_*nce 5

这是一种反模式,因为您的商店只关心数据,而不关心计算。一旦开始向商店中添加功能,您将无法序列化商店中的数据。

但是,将这些帮助程序功能提取出来并变成独立的实用程序选择器非常简单,您可以使用它们来实现相同的目的。

function isNameAvailable(store, name) {
  /* search for `name` in `store` */
}
Run Code Online (Sandbox Code Playgroud)

现在,该功能独立于商店运行,您可以将它们分开进行测试。

从这里,您可以看一下Reselect,它使您可以将isNameAvailable函数转换为缓存的选择器,这意味着您只需要在存储中的适当数据更改时以及重新计算时就可以重新计算。