React与Redux中扩展运算符编译错误求助

嘿，我看到你刚接触React和Redux，在写reducer时遇到了扩展运算符的编译问题，咱们来一步步搞定它～

问题根源 #

你的代码里，SUCCESS case的这一行语法是无效的：

chapters: { ...state.chapters, action.payload }

JavaScript对象字面量里不能直接这么写action.payload——解释器不知道你要把这个payload赋值给哪个键，这就是编译报错的核心原因。

针对性解决方案 #

根据action.payload的结构，有两种常见的修正方式：

情况1：payload是单个章节对象（带唯一标识，比如id）

如果action.payload是一个单独的章节对象（比如{ id: 1, title: "第一章" }），你需要用计算属性名把它添加到chapters对象中：

case SUCCESS:
  return {
    ...state,
    chapters: {
      ...state.chapters,
      [action.payload.id]: action.payload // 用章节的id作为键
    },
    isFetching: false
  };

情况2：payload是多个章节的集合对象

如果action.payload本身就是一个键值对形式的章节集合（比如{ 1: {id:1, title:"第一章"}, 2: {id:2, title:"第二章"} }），直接展开这个对象就行：

case SUCCESS:
  return {
    ...state,
    chapters: {
      ...state.chapters,
      ...action.payload // 直接合并整个payload的章节
    },
    isFetching: false
  };

额外的小提醒 #

别忘了给你的switch语句加一个default分支，否则当匹配不到任何action类型时，reducer会返回undefined，这会导致Redux状态异常：

switch (action.type) {
  // ... 其他case分支
  default:
    return state;
}

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