React 開發者必學！Immer.js 簡化不可變資料處理的最佳利器

Immer.js 簡介

Immer（德語中”永遠”的意思）是一個小型的 JavaScript 庫，允許開發者以一種更便捷的方式處理不可變狀態。Redux 維護者 Mark Erikson 曾評價道：“作為 JS 開發者，Immer 是改變生活的，我甚至沒有誇張:) 它和 Prettier 一樣令人驚嘆，讓人不禁想’這個庫太棒了，我以前怎麼沒有用它？’”

Immer 的核心理念是通過一個臨時的 草稿狀態 (draftState) 來處理數據更新，這個草稿狀態是當前狀態的代理 (Proxy)。開發者可以像操作可變數據一樣直接修改這個草稿，而 Immer 會基於這些修改自動產生新的不可變狀態，同時保持原始狀態不變。

安裝與基本使用

Immer.js 可以通過 npm 或 yarn 安裝：

# 使用 npm
npm install immer

# 或使用 yarn
yarn add immer

安裝完成後，你可以在你的 JavaScript 或 TypeScript 文件中導入 Immer：

import produce from 'immer'

// 或者如果你使用 CommonJS
// const produce = require('immer').produce

Immer 的核心函數是 produce，它允許你創建下一個不可變狀態：

const baseState = [
  { title: "學習 Immer", done: false },
  { title: "使用 Immer", done: false }
]

const nextState = produce(baseState, draft => {
  draft[1].done = true
  draft.push({ title: "分享 Immer", done: false })
})

console.log(baseState)  // 原始狀態不變
console.log(nextState)  // 新狀態包含更改

這個簡單的例子展示了 Immer 如何讓你以一種直觀的方式處理不可變更新。

Immer.js 的主要優勢

1. 使用熟悉的 JavaScript 語法

與其他不可變庫（如 ImmutableJS）不同，Immer 讓開發者能夠使用標準的 JavaScript 數據結構（物件、陣列、Set 和 Map）和操作方法。你不需要學習新的 API 或數據結構，可以直接使用你已經熟悉的 JavaScript 語法：

import produce from "immer"

const baseState = [
  { todo: "學習 TypeScript", done: true },
  { todo: "嘗試 Immer", done: false }
]

const nextState = produce(baseState, draftState => {
  draftState.push({ todo: "推薦給同事", done: false })
  draftState.done = true
})

2. 大幅減少樣板代碼

在傳統的不可變操作中，更新深層嵌套的數據結構需要大量的展開運算符 (...)，導致代碼冗長難讀：

// 不使用 Immer 的情況
const updatedState = {
  ...state,
  user: {
    ...state.user,
    address: {
      ...state.user.address,
      city: 'Taipei'
    }
  }
}

// 使用 Immer 的情況
const updatedState = produce(state, draft => {
  draft.user.address.city = 'Taipei'
})

使用 Immer，代碼變得更加簡潔、直觀且易於維護。

3. 結構共享提高性能

Immer 通過”結構共享”(structural sharing) 技術優化性能，只為修改的部分創建新對象，而未修改的部分則與原始狀態共享。這減少了內存使用並提高了性能，特別是在處理大型狀態樹時。

具體來說，Immer 使用了一種稱為”寫時複製”（copy-on-write）的策略：

當你開始修改一個對象時，Immer 會創建該對象的淺拷貝。
如果你修改了這個對象的某個屬性，Immer 只會為這個屬性創建一個新的引用。
對於沒有被修改的屬性，Immer 會保持原有的引用不變。

這種方法確保了即使在大型、深層嵌套的數據結構中，也能保持高效的更新性能。例如：

const baseState = {
  user: {
    name: "John",
    age: 30,
    address: {
      city: "New York",
      country: "USA"
    }
  },
  settings: {
    theme: "dark",
    notifications: true
  }
}

const nextState = produce(baseState, draft => {
  draft.user.age = 31;
})

在這個例子中，nextState 的 user 對象會是新的，但 settings 對象會與 baseState 共享相同的引用，因為它沒有被修改。這大大減少了不必要的對象創建，提高了性能和內存效率。

Immer 會檢測”無操作”狀態變化，如果實際上沒有任何改變，則返回原始狀態，這可以避免不必要的重新渲染。

4. 自動檢測意外變異

Immer 會自動檢測對不可變對象的意外修改，並拋出錯誤，幫助開發者遵循不可變數據的最佳實踐。

5. 強類型支持

TypeScript (Microsoft)

Immer 為 TypeScript 用戶提供了卓越的支持，大大增強了開發體驗：

自動類型推斷：Immer 能夠自動推斷 produce 函數的返回類型，減少了手動類型註解的需要。
完整的類型安全：與使用字符串路徑的選擇器相比，Immer 的方法保持了完整的類型安全，在編譯時就能捕獲潛在的類型錯誤。
readonly 類型：Immer 提供了 immerable 類型，可以將類型標記為不可變，進一步增強類型檢查。
泛型支持：Immer 的 API 設計支持泛型，使得在複雜的數據結構中也能保持類型的精確性。
IDE 智能提示：得益於其良好的類型定義，使用 Immer 時可以獲得出色的 IDE 自動完成和錯誤檢測支持。

這些特性使得 Immer 在大型 TypeScript 專案中特別有價值，能夠顯著提高代碼質量和開發效率。

6. 自動凍結對象

在開發模式下，Immer 會自動凍結 (freeze) 通過produce創建的數據結構，讓你獲得真正的不可變數據。這增加了代碼的安全性，防止意外修改。具體來說：

凍結操作是遞歸的，確保整個對象樹都是不可變的。
這種自動凍結只在開發環境中生效，不會影響生產環境的性能。
如果嘗試修改凍結的對象，JavaScript 會拋出錯誤，幫助開發者及早發現問題。
可以通過 setAutoFreeze(false) 來禁用這個功能，但通常不建議這樣做。

這個特性特別有助於捕獲那些可能導致副作用的意外修改，確保狀態的純粹性和可預測性。

7. 簡化處理深層嵌套數據

使用 Immer，對深層嵌套數據的更新變得極其簡單：

// 複雜數據結構的深層更新
const store = {
  users: new Map([
    ["17", {
      name: "Michel",
      todos: [
        { title: "買咖啡", done: false }
      ]
    }]
  ])
}

// 深層更新變得簡單
const nextStore = produce(store, draft => {
  draft.users.get("17").todos.done = true
})

與 Redux 結合使用

Immer 在 Redux 中特別有用，可以極大地簡化 reducer 的編寫：

// 不使用 Immer 的 reducer
const contactsReducer = (state = initialState, action) => {
  switch(action.type) {
    case "contacts/contactAdded":
      return {
        ...state,
        user: {
          ...state.user,
          contacts: {
            ...action.payload
          }
        }
      }
    default:
      return state
  }
}

// 使用 Immer 的 reducer
import produce from 'immer';

const contactsReducer = produce((draft, action) => {
  switch (action.type) {
    case "contacts/contactAdded":
      draft.user.contacts = {
        ...action.payload
      }
      break
    default:
      break
  }
})

原理

Immer 的核心運作方式，是透過 JavaScript 的 Proxy API 建立一個「草稿對象（draft）」作為原始狀態的代理。開發者可以像操作一般可變資料一樣修改這個草稿，Immer 會在背後自動追蹤所有變更。

當修改完成後，Immer 會根據這些操作，產生一個全新的不可變狀態對象，同時保留原始狀態不變，實現不可變性與開發便利性的雙重平衡。

這一切都由 Immer 的核心函數 produce 所驅動。它接收兩個參數：

一個原始狀態（base state）
一個修改函數（用來操作草稿狀態）

最終，produce 會回傳一個根據修改邏輯生成的新不可變狀態。

適用場景

React.js Folder Structure (Rahul Mishra)

Immer 通常用於以下場景：

狀態管理：在 React 中管理 UI 狀態，特別是在使用 Redux 時。Immer 可以大大簡化 reducer 的編寫，使得複雜的狀態更新變得直觀和易於維護。例如，在處理深層嵌套的狀態時，Immer 允許直接修改 draft 狀態，而不需要手動創建每一層的新對象。
數據處理：在處理複雜的數據結構時，如 JSON 補丁操作或狀態更新。Immer 特別適合處理深層嵌套的對象或大型數組，它能夠在保持不可變性的同時，提供一種直觀的方式來更新這些複雜結構。
測試：在測試中生成不同的狀態，特別是在需要模擬多種狀態變化的場景。Immer 的 produce 函數可以輕鬆創建多個狀態變體，而不會影響原始狀態，這使得編寫單元測試和集成測試變得更加容易和可靠。
數據同步：在需要同步多個狀態或數據源時，如在多個組件間同步狀態。Immer 的不可變更新模式確保了數據的一致性，同時簡化了跨組件的狀態管理邏輯。
性能優化：在需要優化渲染性能的場景中。由於 Immer 只創建必要的新對象，它可以幫助減少不必要的重渲染，特別是在使用 React.memo 或 shouldComponentUpdate 進行性能優化時。
協作開發：在大型團隊協作的項目中。Immer 的簡單 API 和直觀的使用方式使得團隊成員更容易理解和維護彼此的代碼，減少了由於不當的狀態修改而導致的錯誤。