处理不可变数据工具库 - Immer

React 开发中，数据是不可变的。改 state 和 props，是用新的状态去替换旧的状态。改嵌套比较深的数据时，代码会比较复杂，可读性差。如：

const { stu } = this.state
this.setState(
  stu: {
    ...stu,
    info: {
      ...stu.info,
      age: stu.info.age + 1
    }
  }
)

用 Immer 可以容易的处理不可变数据，提升代码可读性。

介绍

Immer (German for: always) is a tiny package that allows you to work with immutable state in a more convenient way. It is based on the copy-on-write mechanism.

Immer 是处理不可变数据的工具库。Immer 会为要改动的数据，生成一份拷贝。数据操作时，直接改拷贝的数据。最后，把改过的拷贝做为新的数据。

用 Immer 重构上面的代码，如下：

import produce from "immer"
const { stu } = this.state
const newStu = produce(stu, draft => {
  draft.info.age = draft.info.age + 1
})
this.setState({
  stu: newStu
})

Immer 也支持 Currying(柯里化，部分求值)。调用 produce 时，传入第一个参数是函数(数据处理函数)时，返回的是数据处理函数的函数。如:

// 绑定数据处理函数
const mapper = produce((draft, index) => {
  draft.index = index
})
// 使用
console.dir([{}, {}, {}].map(mapper))
// 输出: [{index: 0}, {index: 1}, {index: 2}])

为了方便在函数组件中使用 Immer，Immer 也提供了 React hook 库: use-immer。

import { useImmer } from "use-immer"
const [stu, setStu] = useImmer({...});
setStu(draft => {
  draft.info.age = draft.info.age + 1
})

感觉不错吧，在项目中用起来吧~

参考文档

• Immer 官网
• React 中的不可变数据 — Immer