可重复使用的redux存储数据计算的最佳实践

Question

我刚刚完成了一个redux应用程序的连接,到目前为止它真是太棒了.但是,由于状态存储在巨型商店中,因此您没有任何要访问数据的模型.

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

Redux明确表示不要在状态中存储计算值,这样就可以在组件中定义它.这可能不是正确的,因为那样你最终会在需要它的每个组件中复制这个代码.

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

Answer 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);