小编典典

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

reactjs

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

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

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

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


阅读 300

收藏
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