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

Question

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

假设我有一个模型 class，它存储了一些关于用户的信息。我通常会向 class 添加一个名为 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);

Answer 2

根据 Computing Derived Data page in the Redux docs, the suggested approach is using the Reselect 处理选择和记忆的库。

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

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

Best practice for reusable calculations on data in redux store

model

reactjs

redux