使用 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);