immer：优雅操作react数据状态，告别繁琐克隆拷贝

程序员王天

发布于 2023-10-18 19:34:47

9270

发布于 2023-10-18 19:34:47

文章被收录于专栏：王天的进阶之路

# 前言

Immer 是一个用于简化 JavaScript 状态管理的库，以更方便地更新和操作不可变数据

可以解决以下问题：

不可变状态更新：React 推崇使用不可变（Immutable）的数据来管理组件的状态。 :::tips 【Immutable 不可变对象】不直接修改状态或属性对象，而是创建新的对象来代表改变后的状态。 :::

Immer 使得在 React 中使用不可变数据更加容易，通过提供简洁的 API 和直观的语法，以可变的方式更新不可变数据。

状态更新的简洁性：React 的传统方式是通过使用 setState 方法更新状态，需要手动创建新的状态对象或数组，并进行深度克隆。而使用 Immer，可以通过直接在原始状态上进行修改，以一种可变的方式更新状态。

React 中使用 Immer ，可以避免手动编写深度克隆、合并对象或数组的代码，同时还能保持数据的不可变性，方便进行状态管理和追踪变更。

# react 组件使用 immer

以下是一个使用 Immer 的 React 组件示例：

import React from "react";
import { produce } from "immer";

class Counter extends React.Component {
  state = {
    count: 0,
  };

  increment = () => {
    this.setState(
      produce((draft) => {
        draft.count += 1;
      })
    );
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

在上面的示例中，我们使用 produce 函数将状态更新的逻辑放在一个回调函数中，然后将回调函数传递给 setState。Immer 会在回调函数中提供一个名为 draft 的草稿对象，

我们可以直接对该对象进行更改，而不用担心原始对象被修改。Immer 会根据我们的更改生成一个新的不可变对象，并将其作为新的状态进行更新。

# redux 中使用 immer

接下来，让我们看一个使用 Immer 结合 Redux 的示例：

import { createStore } from "redux";
import produce from "immer";

// 初始状态
const initialState = {
  count: 0,
};

// reducer
const reducer = (state = initialState, action) => {
  return produce(state, (draft) => {
    switch (action.type) {
      case "INCREMENT":
        draft.count += 1;
        break;
      case "DECREMENT":
        draft.count -= 1;
        break;
      default:
        break;
    }
  });
};

// 创建 store
const store = createStore(reducer);

export default store;

在上面的示例中，我们在 Redux 的 reducer 中使用 produce 函数来更改状态。它接收当前状态 state 和表示要进行的更改操作的回调函数。我们可以在回调函数中对 draft 对象进行更改，Immer 会自动处理状态的更新。