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的功能，使得代碼更加簡潔易讀。