如何更简洁地更新Svelte Store？现有实现步骤繁琐

你当前的Svelte Store存储着书籍列表，数据结构如下：

{ 
  "books": [
    {
      "id": "F0tE_25",
      "title": "Abc",
      ...
    },
    {
      "id": "zNPAQit",
      "title": "Ny, Ny",
      ...
    }
  ]
}

现有的更新函数虽然能正常工作，但步骤确实可以简化，这里提供几种更简洁的实现方式：

方式一：用Array.map简化（推荐） #

直接通过map遍历数组，匹配到目标书籍时合并更新数据，一步生成新数组：

updateBook: (id, bookData) => {
  bookstore.update(items => 
    items.map(book => 
      book.id === id ? {...book, ...bookData} : book
    )
  )
}

这种写法逻辑清晰，代码量少，完全遵循不可变数据的原则，适合大多数场景。

方式二：保留索引查找的简化版 #

如果担心map遍历整个数组（数据量极大时），可以优化原有的索引查找逻辑，省去单独复制数组再赋值的步骤：

updateBook: (id, bookData) => {
  bookstore.update(items => {
    const index = items.findIndex(i => i.id === id)
    if (index === -1) return items // 处理找不到对应书籍的边界情况
    return [
      ...items.slice(0, index),
      {...items[index], ...bookData},
      ...items.slice(index + 1)
    ]
  })
}

通过slice拆分原数组，将更新后的书籍插入对应位置，直接生成新数组，同时增加了找不到书籍时的容错处理。

方式三：借助Immer库进一步简化 #

如果你的项目已经引入了Immer（一个处理不可变数据的库），可以用它来避免手动展开对象和数组，代码更直观：

import { produce } from 'immer'

updateBook: (id, bookData) => {
  bookstore.update(items => 
    produce(items, draft => {
      const targetBook = draft.find(book => book.id === id)
      if (targetBook) Object.assign(targetBook, bookData)
    })
  )
}

Immer会帮你处理不可变数据的生成，你只需要直接修改"草稿"对象即可，大幅简化代码。

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