Redux 在哪里处理计算属性？答案

【问题标题】：Where to handle computed properties with Redux?Redux 在哪里处理计算属性？
【发布时间】：2017-03-27 10:05:17
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript redux

【解决方案1】：

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

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

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

connect(mapStateToProps)(MyComponent);

查看Reselect，这是一个设计用于与 Redux 完美配合的选择器库。

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

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

【讨论】：

【解决方案2】：

有两种方式：

在减速器中。

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

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

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

【讨论】：