在调度 Redux Action 之前检查 AppState？答案

【问题标题】：Checking AppState prior to dispatching Redux Action?在调度 Redux Action 之前检查 AppState？
【发布时间】：2018-01-03 19:31:19
【问题描述】：

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

initialState = {
    color: 'red'
}

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

const SET_COLOR = 'SET_COLOR';

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

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

let newColor = <got new color somehow>

现在假设用户输入“红色”（与当前状态相同）。我应该关心 newColor 和当前的 color 是否不同？即，我是否应该首先检查商店以查看 newColor 是否与旧的 color 不同，并且只发送 setColor 操作 IFF 颜色是不同的？或者我应该只调度 setColor 动作，不管是否有区别。

【问题讨论】：

标签： redux action store dispatch

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

性能证明是需要的
这两种情况下的 UI 行为需要有所不同，以让用户知道他们没有更改任何内容
更改颜色会对相关数据产生不良影响（例如，更改颜色可能会将形状重置为三角形）

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

Redux 操作旨在降低成本。不要害怕派送。这与 React 的理念相似。渲染、渲染、渲染，然后让框架完成繁重的工作。

【讨论】：