javascript - 消除不同mapStateToProps之间的冗余

Question

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

{ A: {item1, item2, item3},

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

  a : {anotherItem1, anotherItem2}

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

也就是说，它是扁平的，属性具有归一化的结构。问题是我有大约 8 个不同的屏幕，其中许多屏幕想要从这些属性访问大量特定项目。这意味着我的许多 mapStateToProps 函数都有冗余代码。

例如，假设 Screen1 定义 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)
 ...
}

现在假设 Screen2 也想为其 props 提供完全相同的状态以及其他一些属性。那么 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 也需要相同的东西，问题只会变得更糟。那么如何避免这个问题呢？

Answer 1

您可以编写一个单独的函数来选择状态的特定部分，并在 mapStateToProps 函数中调用该函数:

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

然后在mapStateToProps中使用它，如下所示:

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

编辑:

请注意，每次状态更改时都可能会调用mapStateToProps。如果您的选择器进行任何计算，它将为组件创建新的 props，即使计算结果相同，该组件也会重新渲染。为了防止这种情况，您必须使用内存的选择器，例如库 reselect提供。

有关进一步的解释和示例，请参阅例如Idiomatic Redux: Using Reselect Selectors for Encapsulation and Performance .