Redux reducer报错‘Assignment to function parameter 'state'’求助

嘿，我明白你刚学Redux时遇到这个错误的困扰！这个问题其实是ESLint的no-param-reassign规则在起作用——它禁止直接修改函数的参数变量，而你的代码里正好给state这个参数赋值了，哪怕你是用扩展运算符创建了新对象，修改参数本身的行为还是触发了规则。

问题出在哪？ #

看你的代码：

const fooReducer = (state = {}, action) => { 
  switch (action.type) { 
    case 'INC': { 
      state = { ...state, foo: action.payload, }; // 这里直接给参数state赋值了
      break; 
    } 
    case 'DEC': { 
      state = { ...state, lorem: action.payload, }; // 同样的问题
      break; 
    } 
  } 
  return state; 
};

虽然你没有直接修改原state对象（用了...state做浅拷贝），但你把新对象赋值给了state这个函数参数，这就违反了ESLint禁止修改参数的规则。而且Redux reducer的最佳实践是永远不要修改输入的state参数，而是返回一个全新的状态对象。

正确的修改方式 #

有两种简洁的解决方法，都能彻底解决这个错误：

方法1：使用新变量存储状态

声明一个新的变量来保存更新后的状态，避免修改原参数：

const fooReducer = (state = {}, action) => { 
  let newState = { ...state }; // 先拷贝原状态到新变量
  switch (action.type) { 
    case 'INC': { 
      newState = { ...state, foo: action.payload };
      break; 
    } 
    case 'DEC': { 
      newState = { ...state, lorem: action.payload };
      break; 
    } 
    default: // 别忘记default case，返回原状态处理未知action
      return state;
  } 
  return newState; 
};

方法2：直接在case中返回新状态（更符合Redux风格）

这种方式更简洁，每个case直接返回对应的新状态，不需要break，也不会涉及参数修改：

const fooReducer = (state = {}, action) => { 
  switch (action.type) { 
    case 'INC': { 
      return { ...state, foo: action.payload }; // 直接返回新状态
    } 
    case 'DEC': { 
      return { ...state, lorem: action.payload };
    } 
    default: // 必须有default，返回原状态处理未知action
      return state;
  } 
};

这种写法不仅符合ESLint规则，还完全遵循了Redux reducer的纯函数要求——不修改输入，只返回新状态。

为什么之前的修改没生效？ #

如果你之前按ESLint提示修改但没解决，可能是：

• 只是临时禁用了规则，但没从代码逻辑上避免参数修改；
• 修改后的代码仍然存在给state参数赋值的情况；
• 没有添加default case，这也是Redux reducer的必要部分哦。

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