useReducer的reducer方法可以使用条件判断吗？附递减按钮异常排查

1. reducer方法中是否可以使用条件判断语句 #

可以。reducer是标准的JavaScript纯函数，允许使用if/else、三元表达式等任意条件判断逻辑，仅需满足相同输入永远返回相同输出、无副作用的纯函数要求即可，符合useReducer的设计规范。 #

2. decrement按钮功能异常的问题定位 #

你的代码存在3处可直接导致异常的问题：

• 属性名拼写错误：你定义的state属性为first，但在reducer的inc、dec分支中都错误取值为state.firstc（多了字符c），错误取值会得到undefined，数值运算时会转为NaN。
• dec分支判断条件错误：你写的判断条件是initialState > 0，但initialState是对象类型，对象和数字做大小比较时会被转为NaN，NaN > 0永远返回false，因此每次点击dec都会直接走else分支返回initialState，这是你遇到问题的核心原因。
• 语法不完整：dec分支的else代码块缺少闭合花括号，属于语法漏洞，可能引发不可预期的运行错误。

修正后的reducer代码参考： #

const reducer = (state,action) => {
    switch(action.type){
      case 'inc':
        return { first : state.first + 1}
      case 'dec' :
        // 判断当前state的first值，而非initialState对象
        if(state.first > 0){
          return  { first : state.first - 1}
        }else{
           return initialState
        }
      case 'reset':
        return initialState
      // 新增default分支，避免未知action导致state被置为undefined
      default:
        return state
    }
}

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