reactjs - 为什么即使我修改了草稿，Immer 也没有给我返回一个新状态？

Question

不知道为什么连我都修改了草稿，immer没有给我提供新的状态，而是修改了内容的旧状态实例。

import CartItem from "../../models/cart-item";
import * as actions from "../actions/actionTypes";
import produce from "immer"


const initialState = [];

const reducer = (state=initialState, action) => {
    switch (action.type) {
        case actions.ADD_TO_CART:
          const {id, title, price} = action.product;
          const itemIndexInCart = state.findIndex(item => item.id === id);

          const nextState = produce(state, draftState => {
            if (itemIndexInCart === -1) {
              draftState.push(new CartItem(id, 1, price, title, price));
            } else {
              draftState[itemIndexInCart]['quantity']++;
              draftState[itemIndexInCart]['sum'] += price;
            }
          });
          console.log(state === nextState);
          return nextState;
        default:
            return state;
    }
};

export default reducer;

当新项目插入数组时它正在工作，但是当我想修改数组项目的数量和总和时它没有按预期工作。日志告诉我在那种情况下它是同一个对象。

Answer 1

根据 docs 的说法，诀窍是让您的类(class)具有沉浸感。 .
请注意，console.logging 草稿可能会打印“null”，即使此对象不为 null。

import {immerable} from "immer"

class Foo {
    [immerable] = true // Option 1

    constructor() {
        this[immerable] = true // Option 2
    }
}

Foo[immerable] = true // Option 3

工作演示: https://codesandbox.io/s/blissful-resonance-v6v9b?file=/src/App.js