在哪里使用 Redux 处理计算属性？

Question

在使用 Redux 时，store 应该是唯一的事实来源，并且没有冗余。假设商店的一部分代表有姓名和年龄的人。传统面向对象编程中的 person 类可能如下所示：

class Person {
    constructor(first, last, birthday) {
        this.first = first;
        this.last = last;
        this.birthday = birthday;
    get_fullname() { // ... //}
    get_age() { // ... //}
}

但是，Redux 存储中的对象上不允许使用方法。那么，这些“方法”应该在哪里实施呢？

Answer 1

您可以connect使用选择器在函数内部按需计算这种状态。

function getFullName(state) {
  return `${state.first} ${state.last}`;
}

function mapStateToProps(state) {
  return {
    fullName: getFullName(state)
  };
}

connect(mapStateToProps)(MyComponent);

查看Reselect，这是一个旨在与 Redux 配合使用的选择器库。

从技术上讲，没有规则说你不能在你的减速器中处理它，然后将预先计算的状态存储在你的商店中，但你必须记住每次依赖属性改变时更新它。

通常，如果您将冗余数据保留在您的存储之外，并且使用选择器允许您在需要时在组件之间编写和共享按需计算，那么您最终会得到更简单的代码。

Answer 2

有两种方式：

1. 在减速机中。

   不确定您从哪里获得“商店无冗余”规则。将计算结果与存储中的源数据一起保存是完全有效的（尽管在这种简单的情况下，例如连接姓名可能不是最好的方法）

2. 在选择器中。

   选择器是用于从商店中获取特定子分支的函数。他们还可以在返回之前对它们进行计算。有关一些示例，请参阅 redux 文档中的本章。

   在需要的地方进行一些记忆，我认为这是两者中更好的解决方案。