如何简化Redux的reducer函数？简单reducer的合理长度是多少？

方案1：保留原有状态结构，压缩冗余代码 #

原有代码的冗余点在于单独声明newState再赋值，可直接返回合并后的新对象，搭配三元运算符可将整个reducer简化为表达式形式：

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

方案2：简化状态结构（更推荐） #

你当前的状态域仅存储单个布尔开关，不需要嵌套对象包裹，直接用布尔值作为该状态域的值即可，逻辑会更精简：

简化后的reducer #

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

对应业务代码同步简化 #

// mapStateToProps 简化
const mapStateToProps = state => ({
  Style: state.Style
})

// render 逻辑简化
render() {
  return (
    <img 
      className='icon_all' 
      id={this.props.Style ? "icon_10" : "icon_90"} 
      onClick={this.clickHandler} 
      src='/images/favicon-optimized.svg'
    />
  )
}

reducer没有统一的长度标准，核心遵循单一职责原则即可：一个reducer只负责维护对应状态域的更新逻辑，只要逻辑清晰、可读性达标，哪怕短到1行也完全合理。

你提到的「Redux 触发单个action会执行所有reducer」是框架的正常设计，只要不匹配的action返回原state就不会引发状态变更，这类极简reducer的执行开销可以忽略不计，不需要担心性能问题。

内容的提问来源于stack exchange，提问作者howard