如何简化我的reducer函数或者一个简单的reducer函数应该有多长?

Question

我有一个reducer函数，它的唯一目的是切换样式的打开和关闭。这是一个全局风格，这就是为什么它在我的Redux商店。

但是，对于这样一个简单的切换，代码看起来过于迟钝了。

const Style = (state = {current: true}, action) => {
if(action.type === "toggleAppStyle"){
const newState = { ...state };
newState.current = !state.current;
return newState;
}
return state;
};

我最近意识到redux为每个单个操作运行所有的reducer函数，我觉得很奇怪，所以返回的状态必须等于该操作的初始状态。类型不为特定的reducer调用。

这里是我使用它的一个地方:

// ... snip
const mapStateToProps = state => {
return {
Style: state.Style
}
}

// ... snip
render() {
return (
<img className = 'icon_all' 
id = {this.props.Style.current === true ? 'icon_10' : 'icon_90'} 
onClick = {this.clickHandler} src='/images/favicon-optimized.svg'/>
)
}

Answer 1

对于这样一个简单的切换，代码看起来过于迟钝了。

过于迟钝是有点多，这是一个相当标准的不可变更新模式，即浅复制到新的对象引用和更新必要的属性。

没有比你已经得到的更简单的了，但是这里有一个直接返回新对象的例子。

const Style = (state = {current: true}, action) => {
if (action.type === "toggleAppStyle") {
return {
...state,
current: !state.current,
};
}
return state;
};

我最近意识到redux运行每个reducer的所有函数单个动作，我觉得很奇怪，所以返回的状态必须相等动作的初始状态。类型不被调用减速机。

这里真的没什么奇怪的。reducer函数要么作用于动作，要么作用于状态，因此返回一个new状态引用和值，否则它只是返回当前状态值。除了动作部分，这就是React协调的工作方式。当您更新状态时，您正在创建新的对象引用或原始值。这就是触发渲染器的原因。

当然，如果您的目标是尽可能简短，您可以将状态片缩减为，仅布尔值，并使用三元操作符返回切换状态或当前状态值。请相应地调整您的redux选择器

const Style = (state = true, action) => action.type === "toggleAppStyle"
? !state
: state;