Question

假设我有一个Redux商店，可以跟踪由单一颜色组成的AppState。变量为字符串。

initialState = {
    color: 'red'
}

以及更新此行动的行动：

const SET_COLOR = 'SET_COLOR';

function setColor(color) {
    return { type: SET_COLOR, color };
}

并说我有一些输入允许用户将颜色设置为他们喜欢的颜色。（如何做到这一点无关紧要）

let newColor = <got new color somehow>

现在让我们说用户输入＆＃39; red＆＃39; （与当前状态相同）。我是否应该关心 newColor 和当前的颜色是否有所不同？即，我应该首先检查商店以查看 newColor 是否与旧的颜色不同，并且只调度 setColor 动作IFF的颜色是不同的？或者我应该只调度setColor动作，无论是否存在差异。

Answer 1

如果你正确地执行它（最好为你的状态使用一个好的不可变数据类型，例如immutable.js），那么reducer返回的新状态等于先前的状态，组件将不会重新呈现（提供你有一个PureComponent或componentShouldUpdate返回false，因为状态没有改变）。因此，发送一些额外的操作几乎不会给您的应用带来额外的负担。

Answer 2

一般情况下，我会说做最简单的事情，然后再打电话给setColor。原因是它使您的逻辑更直接。只要用户通过输入字段更改颜色，您的代码就会调度操作。现在，您只需要编写测试用例来验证此行为。这可能听起来微不足道，但1）它加起来2）你还必须测试两种颜色之间来回快速切换的情况，以确保你的代码有效。

如果有明确的理由，我会过滤掉newColor()调度，例如：

表现显示需要
在这两种情况下，UI行为需要有所不同才能让用户知道他们没有改变任何内容
更改颜色会导致不希望的相关数据的副作用（例如，更改颜色可能会将形状重置为三角形）

或类似的。关键是，默认情况下做一件简单的事情，除非有理由不这样做。

Redux操作旨在便宜。不要害怕派遣。它与React的理念相似。渲染，渲染，渲染，让框架完成繁重的任务。

在调度Redux Action之前检查AppState？

2 个答案: