Question

使用Redux时，商店应该是单一的事实来源，并且没有冗余。假设商店的一部分代表具有姓名和年龄的人。传统的面向对象编程中的人类可能看起来像这样：

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工作的选择器库。

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

通常如果您将冗余数据保留在商店之外，您最终会得到更简单的代码，使用选择器可以在需要时编写和共享组件之间的按需计算它们。

Answer 2

有两种方法：

在减速器中。

不确定您在哪里获得“商店中没有冗余”规则。将计算结果与商店中的源数据一起保存是完全有效的（尽管在连接名称和姓氏这样的简单情况下可能不是最好的方法）
在选择器中。

选择器是用于从商店中获取特定子分支的函数。他们还可以在返回之前对它们执行计算。 See this chapter in redux' documentation for some examples。

在需要的情况下进行一些记忆，我认为两者的解决方案更好。

使用Redux处理计算属性的位置？

2 个答案: