JavaScript 利用 Immerjs 实现不可变数据

import { produce } from 'immer';

class MyComponent extends React.Component {
  state = {
    items: [
      { id: 1, name: 'item 1' },
      { id: 2, name: 'item 2' },
      { id: 3, name: 'item 3' },
    ],
  };

  handleDelete = (id) => {
    this.setState(
      produce((draft) => {
        const index = draft.items.findIndex((item) => item.id === id);
        draft.items.splice(index, 1);
      })
    );
  };

  render() {
    return (
      <ul>
        {this.state.items.map((item) => (
          <li key={item.id}>
            {item.name}{' '}
            <button onClick={() => this.handleDelete(item.id)}>Delete</button>
          </li>
        ))}
      </ul>
    );
  }
}

import produce from 'immer';

const initialState = {
  todos: [],
};

const reducer = (state = initialState, action) =>
  produce(state, (draft) => {
    switch (action.type) {
      case 'ADD_TODO':
        draft.todos.push(action.payload);
        break;
      case 'REMOVE_TODO':
        draft.todos = draft.todos.filter((todo) => todo.id !== action.payload.id);
        break;
      default:
        return draft;
    }
  });

const massiveData = require('./massiveData.json');
const produce = require('immer').default;

const newData = produce(massiveData, (draft) => {
  draft.forEach((item) => {
    item.isActive = true;
  });
});

console.log(newData);

import produce from 'immer';

const originalState = {
  user: {
    name: 'Alice',
    age: 25,
    address: {
      city: 'New York',
      state: 'NY',
      country: 'USA',
    },
  },
};

const newState = produce(originalState, (draft) => {
  draft.user.address.city = 'San Francisco';
});

console.log(newState === originalState); // false
console.log(newState.user === originalState.user); // false
console.log(newState.user.address === originalState.user.address); // false
console.log(newState.user.name === originalState.user.name); // true

import produce from 'immer';

const originalState = {
  counter: 0,
};

const newState = produce(originalState, (draft) => {
  draft.counter += 1;
  draft.counter += 1;
  draft.counter += 1;
});

console.log(newState === originalState); // false
console.log(newState.counter); // 3

/**
 * produce 函数接收两个参数：一个原始状态和一个描述如何更新状态的函数，然后返回一个新状态
 * @param {Object} baseState 原始状态
 * @param {Function} recipe 描述如何更新状态的函数
 * @returns {Object} 返回一个新状态
 */
function produce(baseState, recipe) {
  const nextState = {}; // 初始化一个新的状态

  // 遍历原始状态的所有属性，把它们全部添加到新状态中
  for (let key in baseState) {
    nextState[key] = baseState[key];
  }

  // 定义一个代理对象，拦截对新状态的所有访问请求
  const proxy = new Proxy(nextState, {
    // get 方法用来拦截对代理对象的属性的读取操作
    get(target, key) {
      // 如果读取的属性值本身是一个对象，则递归代理该对象
      if (typeof target[key] === 'object' && target[key] !== null) {
        return new Proxy(target[key], this);
      }
      // 否则返回属性值本身
      return target[key];
    },
    // set 方法用来拦截对代理对象的属性的修改操作
    set(target, key, value) {
      // 如果修改的属性值本身是一个对象，则递归代理该对象
      if (typeof value === 'object' && value !== null) {
        value = new Proxy(value, this);
      }
      // 把属性值设置为新值
      target[key] = value;
      // 执行描述如何更新状态的函数
      recipe(nextState);
      // 返回修改后的属性值
      return true;
    },
  });

  // 执行描述如何更新状态的函数，并把代理对象传递给该函数
  recipe(proxy);

  // 返回新状态
  return nextState;
}

const state = {
  count: 0,
  person: {
    name: 'Alice',
    age: 30,
  },
};

const nextState = produce(state, (draft) => {
  draft.count++;
  draft.person.age--;
});

console.log(state); // { count: 0, person: { name: 'Alice', age: 30 } }
console.log(nextState); // { count: 1, person: { name: 'Alice', age: 29 } }