Redux中Action Payload重复使用问题排查（React SSR+WordPress API场景）

嘿，我一眼就看出问题所在了——你的Reducer里的switch语句存在**case穿透（fall-through）**的问题，这就是导致Action payload被重复使用的根本原因！

问题原因详解 #

在JavaScript的switch语句中，如果某个case块末尾没有return或者break，代码会继续执行后续所有case的逻辑。看你的代码：

case 'FETCH_MAIN_MENU':
  state = { ...state, mainMenu: action.payload.data }
case 'FETCH_USER_MENU':
  state = { ...state, userMenu: action.payload.data }

当触发FETCH_MAIN_MENU动作时，代码会先把mainMenu赋值为当前payload的数据，但因为没有终止语句，它会立刻执行下一个case的逻辑，把userMenu也设置成同一个payload的数据。这就造成了同一个payload被错误地赋值给两个状态字段，看起来像是payload被重复使用了。

同样，当触发FETCH_USER_MENU时，虽然最终会走到default返回状态，但这种写法本身就有潜在风险，后续新增case时很容易再次出现类似问题。

解决方案 #

这里有两种标准的修复方式，推荐第一种更符合Redux最佳实践的写法：

方式1：每个case直接返回新状态 #

在每个case处理完状态更新后，直接返回新的状态对象，这样switch语句会立即终止，不会执行后续逻辑：

const initState = { mainMenu: null, userMenu: null }
export default ( state = initState, action ) => {
  switch( action.type ) {
    case 'FETCH_MAIN_MENU':
      return { ...state, mainMenu: action.payload.data }
    case 'FETCH_USER_MENU':
      return { ...state, userMenu: action.payload.data }
    default:
      return state;
  }
}

方式2：使用break终止case逻辑 #

如果你更习惯在switch里先创建新状态，再通过break终止每个case，也可以这样写（注意仍然要保持Reducer的纯函数特性，不能直接修改原state）：

const initState = { mainMenu: null, userMenu: null }
export default ( state = initState, action ) => {
  let newState = { ...state };
  switch( action.type ) {
    case 'FETCH_MAIN_MENU':
      newState.mainMenu = action.payload.data;
      break;
    case 'FETCH_USER_MENU':
      newState.userMenu = action.payload.data;
      break;
    default:
      // 无需修改，直接保留初始复制的状态
  }
  return newState;
}

额外提醒 #

你原来的代码中使用扩展运算符...state创建新状态对象的做法是正确的，这符合Redux对Reducer纯函数的要求——永远不要直接修改原state，必须返回新的状态对象。

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