ImmerJS 不可变数据更新模式详解-优快云博客

ImmerJS 不可变数据更新模式详解

immer immerjs/immer: Immer 是一个用于不可变数据处理的 JavaScript 库，可以用于构建不可变数据结构和应用程序，支持多种编程语言和框架，如 JavaScript，TypeScript，React，Angular 等。项目地址: https://gitcode.com/gh_mirrors/im/immer

前言

在现代前端开发中，不可变数据(Immutable Data)的概念越来越重要。React等框架推崇不可变数据的原则，但原生JavaScript处理不可变数据往往需要编写冗长的代码。ImmerJS通过"草稿状态"的概念，让我们能以可变的方式编写不可变逻辑。

本文将全面介绍ImmerJS中的各种数据更新模式，帮助开发者掌握这一强大工具。

对象更新模式

基本操作

ImmerJS允许我们以直观的方式更新对象：

const todosObj = {
  id1: {done: false, body: "Take out the trash"},
  id2: {done: false, body: "Check Email"}
}

// 添加新属性
const addedTodosObj = produce(todosObj, draft => {
  draft["id3"] = {done: false, body: "Buy bananas"}
})

// 删除属性
const deletedTodosObj = produce(todosObj, draft => {
  delete draft["id1"]
})

// 更新属性
const updatedTodosObj = produce(todosObj, draft => {
  draft["id1"].done = true
})

技术要点

添加属性时直接使用赋值语法
删除属性使用delete操作符
更新属性通过点表示法或方括号表示法

数组更新模式

基本操作

数组操作是前端开发中最常见的场景之一：

const todosArray = [
  {id: "id1", done: false, body: "Take out the trash"},
  {id: "id2", done: false, body: "Check Email"}
]

// 添加元素到末尾
const addedTodosArray = produce(todosArray, draft => {
  draft.push({id: "id3", done: false, body: "Buy bananas"})
})

// 根据索引删除
const deletedTodosArray = produce(todosArray, draft => {
  draft.splice(1, 1) // 删除索引为1的元素
})

// 根据索引更新
const updatedTodosArray = produce(todosArray, draft => {
  draft[1].done = true
})

高级操作

// 在指定位置插入元素
const insertedTodosArray = produce(todosArray, draft => {
  draft.splice(1, 0, {id: "id3", done: false, body: "Buy bananas"})
})

// 删除最后一个元素
const poppedTodosArray = produce(todosArray, draft => {
  draft.pop()
})

// 删除第一个元素
const shiftedTodosArray = produce(todosArray, draft => {
  draft.shift()
})

// 在数组开头添加元素
const unshiftedTodosArray = produce(todosArray, draft => {
  draft.unshift({id: "id3", done: false, body: "Buy bananas"})
})

// 根据ID删除元素
const deletedByIdTodosArray = produce(todosArray, draft => {
  const index = draft.findIndex(todo => todo.id === "id1")
  if (index !== -1) draft.splice(index, 1)
})

// 根据ID更新元素
const updatedByIdTodosArray = produce(todosArray, draft => {
  const index = draft.findIndex(todo => todo.id === "id1")
  if (index !== -1) draft[index].done = true
})

// 过滤元素
const filteredTodosArray = produce(todosArray, draft => {
  return draft.filter(todo => todo.done)
})

性能建议

对于频繁查找的场景，建议使用Map或索引对象替代数组+find操作
批量操作可以使用展开运算符：draft.unshift(...items)

嵌套数据结构处理

ImmerJS真正强大的地方在于处理复杂的嵌套数据结构：

const store = {
  users: new Map([
    [
      "17",
      {
        name: "Michel",
        todos: [
          {
            title: "Get coffee",
            done: false
          }
        ]
      }
    ]
  ])
}

// 深度更新
const nextStore = produce(store, draft => {
  draft.users.get("17").todos[0].done = true
})

// 深度过滤
const filteredStore = produce(store, draft => {
  const user = draft.users.get("17")
  user.todos = user.todos.filter(todo => todo.done)
})