Javascript 消除不同MapStateTrops之间的冗余

我的redux存储具有以下结构：

{ A: {item1, item2, item3},

 .....
  F : {item1, item2, item3},

  a : {anotherItem1, anotherItem2}

  .....
  z : {anotherItem1, anotherItem2}
}

也就是说，它是平坦的，并且属性具有规范化结构。 问题是，我有大约8个不同的屏幕，其中许多屏幕需要访问这些属性中的大量特定项。这意味着许多my

MapStateTrops

函数都有冗余代码

例如，假设Screen1定义了

MapStateTrops

，如下所示

mapStateToProps(state){
 aitem1 : stata.a.item1,
 aFormatted : formatFunction(state.a.item2, state.a.item3)
 bitem1: state.b.item1,
 bFormatted : formatFunction(state.b.item2,  state.b.item2)
 ...
}

现在假设Screen2也希望给它的道具提供完全相同的状态 以及其他一些属性。那么Screen2是否应该有这样的mapStateToProps函数

mapStateToProps(state){
 aitem1 : stata.a.item1,
 aFormatted : formatFunction(state.a.item2, state.a.item3)
 bitem1: state.b.item1,
 bFormatted : formatFunction(state.b.item2,  state.b.item2)
 ...
 other stuff
}

---

如果屏幕3和屏幕4也需要同样的东西，问题只会更加严重。那么如何避免这个问题呢？

您可以编写一个单独的函数来选择状态的某个部分，并在

MapStateTrops

函数中调用该函数：

const getDataParts = state => ({
   foo: state.foo,
   bar: state.baz,
});

然后在

MapStateTrops

中，像这样使用它：

const mapStateToProps = state => ({
    ...getDataParts(state),
    otherProp: state.someOtherProp,
});

编辑：

请注意，

MapStateTrops

可能会在每次状态更改时调用。如果选择器执行任何计算，它将为组件创建新的道具，即使计算结果相同，该道具也将重新渲染。为了避免这种情况，您必须使用库中提供的记忆选择器

---

有关进一步的解释和示例，请参见，例如：

您可以编写一个单独的函数来选择状态的某一部分，并在

MapStateTrops

函数中调用该函数：

const getDataParts = state => ({
   foo: state.foo,
   bar: state.baz,
});

然后在

MapStateTrops

中，像这样使用它：

const mapStateToProps = state => ({
    ...getDataParts(state),
    otherProp: state.someOtherProp,
});

编辑：

请注意，

MapStateTrops

可能会在每次状态更改时调用。如果选择器执行任何计算，它将为组件创建新的道具，即使计算结果相同，该道具也将重新渲染。为了避免这种情况，您必须使用库中提供的记忆选择器

---

有关进一步的解释和示例，请参见，例如：

该问题不够具体。这意味着我的很多mapStateToProps函数都有冗余代码-这些函数到底是什么？有几种方法可以解决这个问题。一种是将

MapStateTrops

放在某个地方，只在需要的地方导入，而不是重复代码。或者您可以编写一个连接到存储的组件，并将其用作提供程序组件，将其他组件包装到存储中。@trixn我对您的第一种方法很感兴趣。唯一的问题是导入的mapStateToProps需要返回一个巨大的对象，其中包含许多屏幕导入它不需要的项目。@estus我用一个example@DrawkcabEsrever那么它就不会被复制了。每个连接的组件都通过

MapStateTrops

定义自己的数据需求。因此，在应用程序中使用不同的

mapstatetops

函数并不是一个坏习惯。问题还不够具体。这意味着我的很多mapStateToProps函数都有冗余代码-这些函数到底是什么？有几种方法可以解决这个问题。一种是将

MapStateTrops

放在某个地方，只在需要的地方导入，而不是重复代码。或者您可以编写一个连接到存储的组件，并将其用作提供程序组件，将其他组件包装到存储中。@trixn我对您的第一种方法很感兴趣。唯一的问题是导入的mapStateToProps需要返回一个巨大的对象，其中包含许多屏幕导入它不需要的项目。@estus我用一个example@DrawkcabEsrever那么它就不会被复制了。每个连接的组件都通过

MapStateTrops

定义自己的数据需求。因此，在应用程序中使用不同的

mapstatetops

函数并不是一种坏做法。我设法找到了一篇建议类似方法的帖子。他们使用'selectors'@drawkcabes将其命名为。您可能会发现此库很有用：。如果此类选择器计算字段并在每次调用时返回不同的对象，则可能会出现问题。由于每次状态更改时都会调用

MapStateTops

，因此如果不使用记忆选择器，则会对性能造成严重影响，因为使用此选择器的所有连接组件（可能是其子组件）都将重新渲染，而实际上没有任何更改。是的。请参阅我的帖子，了解解释和示例。优秀的帖子评分。在我看来，你的帖子把我介绍给遴选者做得更好，然后官方文档设法找到了一篇建议类似方法的帖子。他们使用'selectors'@drawkcabes将其命名为。您可能会发现此库很有用：。如果此类选择器计算字段并在每次调用时返回不同的对象，则可能会出现问题。由于每次状态更改时都会调用

MapStateTops

，因此如果不使用记忆选择器，则会对性能造成严重影响，因为使用此选择器的所有连接组件（可能是其子组件）都将重新渲染，而实际上没有任何更改。是的。请参阅我的帖子，了解解释和示例。优秀的帖子评分。在我看来，你的帖子比官方文件更能把我介绍给选择者