immer——不可变对象操作的利器

小蓝 • 2024-12-29 12:51 • 编程

一、什么是immer

immer是一个用于JavaScript的不可变数据结构库。不可变数据结构一旦创建就不能被修改，这意味着它们是永久存储的，并且可以安全地在多个线程之间共享。immer允许您使用基于修改的代码来构建不可变数据，但是在执行时会产生新数据，使其不可变。

二、immer的优势

immer的一个优势是，您可以在单个语句中创建具有多个层次的对象（例如，嵌套数组和对象）的不可变副本。使用immer可以轻松地将对象转换为不可变的数据结构，并且不太容易出现错误。另一个优势是immer使用ES6的Proxy，在JavaScript运行时捕获对对象（或数组）的修改，进而生成新的不可变对象，让您不必自己编写复杂的逻辑来跟踪变化。

三、immer的API使用

1. produce函数

immer的API核心是produce函数，该函数的原型如下：

produce(base: T, recipe: (draft: Draft) => (T | void)) => T

其中，base参数代表您要创建不可变对象的初始对象，recipe参数是一个函数，该函数接受当前初始对象dref的代理和对dref的修改。这个函数需要返回一个描述对dref的修改的函数。

下面是一个调用produce函数构建不可变对象的示例：

import produce from 'immer';

const baseState = [
  {
    todo: 'Learn typescript!',
    done: true
  },
  {
    todo: 'Use immer!',
    done: false
  }
]

const nextState = produce(baseState, draftState => {
  draftState.push({ todo: 'Tweet about it' });
  draftState[1].done = true;
});

2. Draft类型

Draft类型是immer中的一种数据类型。该类型对应于使用Proxy创建的可变副本。Draft类型有以下几种内建API：

draft.someKey——访问对象的属性
delete draft.someKey——从对象中删除一个属性
draft.someArray.push(item)——对数组进行修改
draft.someArray[index] = item——对数组进行修改
draft.someArray.splice(index, removeCount, item1, item2, …)——对数组进行修改

3. produceWithPatches函数

produceWithPatches函数的工作方式类似于produce，唯一的区别是它返回一个元组，其中包含结果对象以及创建结果对象时所做的所有更改。

import { produceWithPatches } from 'immer'

const baseState = {
  todo: [{ text: 'Learn typescript!' }],
  done: false
}

const [nextState, patches, inversePatches] = produceWithPatches(baseState, draft => {
  draft.done = true;
  draft.todo.push({ text: 'Tweet about it' })
})

4. applyPatches函数

applyPatches函数将补丁应用于给定状态的工具函数。

import { applyPatches } from 'immer'

const baseState = {
  todo: [{ text: 'Learn typescript!' }],
  done: false
}

const [nextState, patches] = produceWithPatches(baseState, draft => {
  draft.done = true;
  draft.todo.push({ text: 'Tweet about it' })
})

console.log(nextState) 
// {
//   todo: [
//     { text: 'Learn typescript!' },
//     { text: 'Tweet about it' }
//   ],
//   done: true
// }

const finalState = applyPatches(baseState, patches)

console.log(finalState)
// {
//   todo: [
//     { text: 'Learn typescript!' },
//     { text: 'Tweet about it' }
//   ],
//   done: true
// }

四、immer的应用场景

immer可以在数据和状态管理中发挥作用。例如，在Redux中使用immer，您可以编写简洁，易于理解的代码来处理应用程序状态。此外，在使用可变状态对象的情况下，immer使得单元测试更容易编写和执行。

五、immer的总结

immer提供了一种轻松构建不可变对象的方法，它还提供了用于跟踪变化的良好API。在实际开发中，immer帮助开发者在数据处理上更充分地利用了JavaScript的功能，使得代码更加简洁易读。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/300441.html