您的位置:

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

一、什么是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的功能,使得代码更加简洁易读。