使用 Immer 的更好的減速器

作為一個 React 開發者，你應該已經熟悉了state 不應該直接改變的原則。 您可能想知道這意味著什麼（我們大多數人在剛開始時都感到困惑）。

本教程將對此進行公正處理：您將了解什麼是不可變狀態以及對它的需求。 您還將學習如何使用 Immer 處理不可變狀態以及使用它的好處。 您可以在此 Github 存儲庫中找到本文中的代碼。

JavaScript 中的不變性及其重要性

Immer.js 是一個小型 JavaScript 庫，由 Michel Weststrate 編寫，其使命是讓您“以更方便的方式處理不可變狀態”。

但在深入研究 Immer 之前，讓我們快速回顧一下 JavaScript 中的不變性以及它在 React 應用程序中的重要性。

最新的 ECMAScript（又名 JavaScript）標准定義了九種內置數據類型。 在這九種類型中，有六種被稱為primitive值/類型。 這六個原語是undefined 、 number 、 string 、 boolean 、 bigint和symbol 。 使用 JavaScript 的typeof運算符進行簡單檢查將揭示這些數據類型的類型。

 console.log(typeof 5) // number console.log(typeof 'name') // string console.log(typeof (1 < 2)) // boolean console.log(typeof undefined) // undefined console.log(typeof Symbol('js')) // symbol console.log(typeof BigInt(900719925474)) // bigint

primitive是一個不是對象且沒有方法的值。 對於我們目前的討論來說，最重要的是一個原語的值一旦被創建就不能改變。 因此，原語被稱為immutable的。

其餘三種類型是null 、 object和function 。 我們還可以使用typeof運算符檢查它們的類型。

 console.log(typeof null) // object console.log(typeof [0, 1]) // object console.log(typeof {name: 'name'}) // object const f = () => ({}) console.log(typeof f) // function

這些類型是mutable的。 這意味著它們的值可以在創建後隨時更改。

您可能想知道為什麼我在上面有數組[0, 1] 。 好吧，在 JavaScriptland 中，數組只是一種特殊類型的對象。 如果您還想知道null以及它與undefined有何不同。 undefined只是意味著我們沒有為變量設置值，而null是對象的特例。 如果您知道某物應該是一個對象，但該對像不存在，您只需返回null 。

為了用一個簡單的例子來說明，試著在你的瀏覽器控制台中運行下面的代碼。

 console.log('aeiou'.match(/[x]/gi)) // null console.log('xyzabc'.match(/[x]/gi)) // [ 'x' ]

String.prototype.match應該返回一個數組，它是一個對object類型。 當它找不到這樣的對象時，它返回null 。 返回undefined在這裡也沒有意義。

夠了。 讓我們回到討論不變性。

根據 MDN 文檔：

“除了對象之外的所有類型都定義了不可變的值（即不能更改的值）。”

該語句包含函數，因為它們是一種特殊類型的 JavaScript 對象。 請參閱此處的函數定義。

讓我們快速了解一下可變和不可變數據類型在實踐中的含義。 嘗試在瀏覽器控制台中運行以下代碼。

 let a = 5; let b = a console.log(`a: ${a}; b: ${b}`) // a: 5; b: 5 b = 7 console.log(`a: ${a}; b: ${b}`) // a: 5; b: 7

我們的結果表明，即使b是從a “派生”的，更改b的值也不會影響a的值。 這是因為當 JavaScript 引擎執行語句b = a時，它會創建一個新的、單獨的內存位置，將5放入其中，並將b指向該位置。

對象呢？ 考慮下面的代碼。

 let c = { name: 'some name'} let d = c; console.log(`c: ${JSON.stringify(c)}; d: ${JSON.stringify(d)}`) // {"name":"some name"}; d: {"name":"some name"} d.name = 'new name' console.log(`c: ${JSON.stringify(c)}; d: ${JSON.stringify(d)}`) // {"name":"new name"}; d: {"name":"new name"}

我們可以看到，通過變量d更改 name 屬性也會在c中更改它。 這是因為當 JavaScript 引擎執行語句c = { name: 'some name ' }時，JavaScript 引擎會在內存中創建一個空間，將對象放入其中，並將c指向它。 然後，當它執行語句d = c時，JavaScript 引擎只是將d指向同一個位置。 它不會創建新的內存位置。 因此，對d中的項目的任何更改都隱含地是對c中的項目的操作。 不費力氣，我們就能明白為什麼這是個麻煩事。

想像一下，您正在開發一個 React 應用程序，並且您想在某個地方通過讀取變量c來將用戶名顯示為some name 。 但是在其他地方，您通過操作對象d在代碼中引入了錯誤。 這將導致用戶名顯示為new name 。 如果c和d是原語，我們就不會有這個問題。 但是對於典型的 React 應用程序必須維護的狀態種類來說，原語太簡單了。

這就是為什麼在應用程序中保持不可變狀態很重要的主要原因。 我鼓勵您通過閱讀 Immutable.js README 中的這個簡短部分來檢查其他一些注意事項：不變性的案例。

了解了為什麼我們需要在 React 應用程序中保持不變性之後，現在讓我們看看 Immer 如何通過其produce函數解決這個問題。

Immer的produce功能

Immer 的核心 API 非常小，您將使用的主要功能是produce功能。 produce簡單地接受一個初始狀態和一個定義狀態應該如何變化的回調。 回調本身接收到它進行所有預期更新的狀態的草稿（相同，但仍然是副本）副本。 最後，它produce一個新的、不可變的狀態，並應用了所有的更改。

這種狀態更新的一般模式是：

 // produce signature produce(state, callback) => nextState

讓我們看看這在實踐中是如何工作的。

 import produce from 'immer' const initState = { pets: ['dog', 'cat'], packages: [ { name: 'react', installed: true }, { name: 'redux', installed: true }, ], } // to add a new package const newPackage = { name: 'immer', installed: false } const nextState = produce(initState, draft => { draft.packages.push(newPackage) })

在上面的代碼中，我們簡單地傳遞了起始狀態和一個回調來指定我們希望突變如何發生。 就這麼簡單。 我們不需要觸及該州的任何其他部分。 它使initState保持不變，並在結構上共享我們在起始狀態和新狀態之間未觸及的那些狀態部分。 在我們的州，其中一個這樣的部分是pets數組。 nextState produce一個不可變的狀態樹，其中包含我們所做的更改以及我們未修改的部分。

有了這些簡單但有用的知識，讓我們看看produce如何幫助我們簡化 React reducer。

使用 Immer 編寫減速器

假設我們有下面定義的狀態對象

const initState = { pets: ['dog', 'cat'], packages: [ { name: 'react', installed: true }, { name: 'redux', installed: true }, ], };

我們想添加一個新對象，然後在後續步驟中，將其installed的密鑰設置為true

 const newPackage = { name: 'immer', installed: false };

如果我們使用 JavaScript 對象和數組擴展語法以通常的方式執行此操作，我們的狀態縮減器可能如下所示。

 const updateReducer = (state = initState, action) => { switch (action.type) { case 'ADD_PACKAGE': return { ...state, packages: [...state.packages, action.package], }; case 'UPDATE_INSTALLED': return { ...state, packages: state.packages.map(pack => pack.name === action.name ? { ...pack, installed: action.installed } : pack ), }; default: return state; } };

我們可以看到，這對於這個相對簡單的狀態對象來說是不必要的冗長並且容易出錯。 我們還必須觸及國家的每一個部分，這是不必要的。 讓我們看看如何使用 Immer 來簡化它。

 const updateReducerWithProduce = (state = initState, action) => produce(state, draft => { switch (action.type) { case 'ADD_PACKAGE': draft.packages.push(action.package); break; case 'UPDATE_INSTALLED': { const package = draft.packages.filter(p => p.name === action.name)[0]; if (package) package.installed = action.installed; break; } default: break; } });

//curried produce signature produce(callback) => (state) => nextState

 const curriedProduce = produce((draft, action) => { switch (action.type) { case 'ADD_PACKAGE': draft.packages.push(action.package); break; case 'SET_INSTALLED': { const package = draft.packages.filter(p => p.name === action.name)[0]; if (package) package.installed = action.installed; break; } default: break; } });

 // add a new package to the starting state const nextState = curriedProduce(initState, { type: 'ADD_PACKAGE', package: newPackage, }); // update an item in the recently produced state const nextState2 = curriedProduce(nextState, { type: 'SET_INSTALLED', name: 'immer', installed: true, });

 yarn add immer use-immer

import React from "react"; import { useImmer } from "use-immer"; const initState = {} const [ data, updateData ] = useImmer(initState)

 // make changes to data updateData(draft => { // modify the draft as much as you want. })

 import React from "react"; import { useImmerReducer } from "use-immer"; const initState = {} const reducer = (draft, action) => { switch(action.type) { default: break; } } const [data, dataDispatch] = useImmerReducer(reducer, initState);