如何在JavaScript中用扩展运算符更新Reducer内部对象数组

我完全懂你在处理Redux状态更新时遇到的困扰——想修改site->subscriptions[x]里的对象，但用扩展运算符时不小心把新的subscriptions直接挂到了根site对象上，这都是因为嵌套状态的更新需要逐层处理，不能一蹴而就。

你的解决方案思路是对的，我再帮你拆解下细节，还加了点鲁棒性优化：

首先，我们需要遵循Redux状态不可变的原则，不能直接修改原数组，而是用map生成一个新数组，找到匹配uuid的元素并替换：

// 遍历subscriptions数组，替换目标对象
const updatedSubscriptions = state.site.subscriptions?.map(subs => {
  if (subs.uuid === action.payload.uuid) {
    return action.payload;
  }
  // 不匹配的元素直接返回原对象，保持不变
  return subs;
}) ?? [];

这里用了可选链?.处理subscriptions可能为null或undefined的情况，再用空值合并运算符??兜底返回空数组，避免调用map时抛出错误。

接下来，我们要创建新的site对象，保留原site的所有其他属性，只替换更新后的subscriptions数组：

const updatedSite = { ...state.site, subscriptions: updatedSubscriptions };

这里的扩展运算符...state.site会复制原site的所有属性（比如id、uuid），然后我们覆盖subscriptions字段为刚才生成的新数组，这样就不会出现把subscriptions加到根对象的问题了。

最后返回完整的新状态对象：

return { site: updatedSite };

完整的handle函数代码如下：

function handle(state: SiteState, action: SuccessAction): SiteState {
  const updatedSubscriptions = state.site.subscriptions?.map(subs => {
    if (subs.uuid === action.payload.uuid) {
      return action.payload;
    }
    return subs;
  }) ?? [];

  const updatedSite = { ...state.site, subscriptions: updatedSubscriptions };

  return { site: updatedSite };
}

关键要记住：Redux依赖状态的引用变化来检测更新，所以每次修改嵌套结构时，都要逐层复制对象/数组，只更新需要改变的部分，绝对不能直接修改原状态的属性或数组元素。

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