这些代码是不可变的吗？

Question

I have to change state in my component, but I don't know whether this code is immutable. I came up with two ways to solve this problem. Both of these codes work well but don't know if they are immutable. I would be grateful if you could tell me which is better or which is better than these codes.

Trial 1

  handleRemove = id => {
    const { dummyData } = this.state;
    delete dummyData[id];

    this.setState({ dummyData });
  };

Trial 2

  handleRemove = id => {
    const { dummyData } = this.state;

    this.setState({
      dummyData: {
        ...Object.keys(dummyData)
          .filter(key => key !== id)
          .reduce((acc, cur) => {
            return {
              ...acc,
              [cur]: dummyData[cur]
            };
          }, {})
      }
    });
  };

Answer 1

Trial 1 will mutate dummyData , trial 2 will not, but it's overly complicated.

Other alternative are:

• use es6 object destructuring:

   const { [id]: _, ...dummyData } = this.state.dummyData; this.setState({ dummyData }); 

• use other utility function like lodash's _.omit

• use library that allow you to modify an object freely without mutate it, like immer .