Redux初始状态失效：基础计数器应用点击后返回NaN求助

嘿，我来帮你搞定这个NaN的问题！你遇到的核心问题是状态类型不一致导致的，咱们一步步拆解：

问题根源 #

你最初的initialState是一个对象{ counter: 0 }，但修改后的reducer在处理ADD action时，返回的是state.counter + 1——这直接把Redux的全局状态从对象类型变成了数字类型！

第一次点击按钮时：

• state是初始对象{ counter: 0 }，返回0 + 1 = 1，此时全局状态变成了数字1
  第二次点击按钮时：
• state已经是数字1了，你再访问state.counter就会得到undefined，undefined + 1自然就变成NaN了

而且你也提到了Redux的核心规则：不能修改原状态，必须返回新状态，你的写法既破坏了状态结构，也没遵循这个规则。

正确的解决方案 #

你需要保持状态的结构始终是对象，并且返回新的状态对象，而不是直接返回数字。修改reducer如下：

const initialState = { counter: 0 }
const reducer = (state = initialState, action) => {
  switch(action.type){
    case 'ADD':
      // 用扩展运算符复制原状态的所有属性，再覆盖counter值
      // 这样既不修改原状态，又保持了状态结构
      return { ...state, counter: state.counter + 1 }
    default:
      // 一定要处理default情况，返回原状态
      return state
  }
}

另外还要同步修改mapStateToProps，因为现在全局状态是对象，组件需要拿到的是对象里的counter属性：

const mapStateToProps = state => ({ counter: state.counter })

额外提醒 #

• 永远不要随意改变Redux状态的类型，初始是对象就一直保持对象，初始是数组就保持数组
• 创建新状态的方式：对象可以用扩展运算符...或者Object.assign({}, state, { ...newProps })，数组可以用[...state, newItem]或者state.map()等方法
• 记得在switch里加上default分支，返回原状态，避免意外情况

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