关于Redux存储中数据可重用计算的最佳实践

小编典典

关于Redux存储中数据可重用计算的最佳实践

reactjs

我刚刚完成了redux应用程序的连接，到目前为止，一切都很棒。但是，由于状态存储在大型商店中，因此您没有从中访问数据的任何模型。

假设我有一个模型类，用于存储有关用户的一些信息。我通常会在称为的类中添加一个函数，以display_name智能地组合其名称的不同部分。这样，我的不同观点就可以简单地调用，display_name而无需他们自己知道如何自己计算。

Redux明确表示不要在状态中存储计算值，这样就可以在组件中对其进行定义。但是，这可能不正确，因为那样您最终将在需要它的每个组件中复制此代码。

存储此逻辑的适当位置在哪里？

阅读 299

2020-07-22

共1个答案

小编典典

最简单的方法是创建实用程序函数来计算此数据，并将它们放在一个单独的模块中，该模块可以被许多组件的mapStateToProps功能使用。一个超简单的例子：

import { displayName } from "./utils";

function mapStateToProps(state) {
  return {
    displayName: displayName(state.user)
  };
}

function MyComponent(props) {
  return <div>Name: {props.displayName}</div>;
}

export default connect(mapStateToProps)(MyComponent);

2020-07-22