Redux中触发INCREMENT_BY_VALUE出现NaN的原因及解决方法

问题原因 #

你在实现INCREMENT_BY_VALUE功能时，动作创建函数与reducer的字段命名不匹配：

• 在incrementByValue函数中，你将传入的数值存储在了action属性中
• 但在reducer处理该动作时，却尝试读取action.payload——这个属性不存在，值为undefined
• 当state.count（数值类型）与undefined相加时，结果就会变成NaN

修复方案 #

有两种修复方式，推荐遵循Redux的通用惯例使用payload字段：

方式1：修改动作创建函数（推荐）

将动作对象中的action字段改为payload，与reducer中的读取逻辑匹配：

const incrementByValue = (value) => {
  return {
    type: INCREMENT_BY_VALUE,
    payload: value // 替换原有的action字段为payload
  }
}

方式2：修改reducer中的读取逻辑

如果不想改动动作创建函数，也可以调整reducer里的字段读取：

case INCREMENT_BY_VALUE:
  return {
    ...state,
    count: state.count + action.action // 读取action字段而非payload
  }

修复后运行结果 #

执行代码后，最后一次dispatch的输出会变为：

{ count: 10 }

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