在调度 Redux Action 之前检查 AppState？

Question

假设我有一个 Redux 存储，它跟踪由单个 'color' 变量作为字符串组成的 AppState。

initialState = {
    color: 'red'
}

以及用于更新此内容的操作：

const SET_COLOR = 'SET_COLOR';

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

然后说我有某种输入允许用户将颜色设置为他们喜欢的任何颜色。（这是如何完成的无关紧要）

let newColor = <got new color somehow>

现在假设用户输入 'red'（与当前状态相同）。我应该关心 newColor 和当前的 color 是否不同吗？即，我是否应该先检查商店，看看 newColor 是否与旧的 color 不同，然后只发送 setColor 动作IFF颜色不同？或者我应该只发送 setColor 操作，而不管是否存在差异。

Answer 1

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

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

性能表明需要
UI 行为需要在这两种情况下有所不同，让用户知道他们没有改变任何东西
更改颜色会对相关数据产生不利的副作用（例如，更改颜色可能会将形状重置为三角形）

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

Redux 操作被设计为廉价的。不要害怕派遣。这与 React 的哲学相似。渲染、渲染、渲染，让框架来完成繁重的工作。

Answer 2

如果你做得正确（最好为你的状态使用一个好的不可变数据类型，例如 immutable.js），那么你的 reducer 返回的新状态等于以前的状态并且组件不会重新-render（前提是你有一个 PureComponent 或 componentShouldUpdate returns false 因为状态没有改变）。因此，调度一些额外的操作实际上不会给您的应用带来额外负担。

在调度 Redux Action 之前检查 AppState？

Checking AppState prior to dispatching Redux Action?

action

store

dispatch

redux