对 redux store 中的数据进行可重用计算的最佳实践答案

【问题标题】：Best practice for reusable calculations on data in redux store对 redux store 中的数据进行可重用计算的最佳实践
【发布时间】：2015-12-13 19:08:18
【问题描述】：

我刚刚完成了一个 redux 应用程序的连接，到目前为止它非常棒。但是，由于状态存储在一个巨大的存储中，因此您没有任何模型可以从中访问数据。

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

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

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

【问题讨论】：

标签： model reactjs redux

【解决方案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);

【讨论】：

【解决方案2】：

根据 Redux 文档中的 Computing Derived Data 页面，建议的方法是使用 Reselect 库来处理选择和记忆。

如果您在 Github 上搜索包含术语“createSelector”的 Javascript 项目，您应该会发现许多实际应用程序以各种方式使用 Reselect。这是我发现的三个：jfurrow/flood、FH-Potsdam/shifted maps 和 madou/GW2 Armory

【讨论】：

我觉得这是正确的答案，答案，因为接受的答案每次都会导致重新计算。
完全取决于displayName 函数返回的内容。如果是字符串，那么每次重新创建相同内容的字符串，仍然认为===相等。