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

Question

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

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

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

存储此逻辑的正确位置在哪里？

Answer 1

最简单的方法是创建实用函数来计算这些数据，并将它们放入一个单独的模块中，该模块可供许多组件的 mapStateToProps 函数使用。一个 super 简单的例子:

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