问题:在调度 Redux Action 之前检查 AppState?

假设我有一个 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 操作?或者我应该只调度 setColor 动作,不管是否有区别。

解答

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

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

• 性能显示需要

• 这两个场景的UI行为需要不同,让用户知道他们没有改变任何东西

• 更改颜色会对相关数据产生不良影响(例如,更改颜色可能会将形状重置为三角形)

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

Redux 操作被设计为便宜。不要害怕派送。这与 React 的理念相似。渲染、渲染、渲染,然后让框架完成繁重的工作。