Get the list of patches

[kettanaito]

Is it possible to get a list of changes applied by a draft?

I'd like to check if certain properties were updated by the draft and if they were, fire some side effects. Something like:

const [nextState, changes] = create(baseState, update)

for (const change of changes) {
  // Let's pretend array equality works like this.
  if (change.path === ['some', 'nested', 'property'] && change.nextValue = 1) {
    sideeffect()
  }
}

Can I achieve this with the existing API somehow? I've seen patches but that's a function meant to apply/revert the changes. Not quite what I'm looking for.

#72 does sound extremely close to what I need!

[unadlib]

#72 is primarily about listening for changes to the draft in a manner before it's finalized.

From your example, it seems you are listening for changes after the finalization is complete and a new state has been produced.

This means you could consider using a shallow comparison to detect changes.

For example:

function isEqual(x: any, y: any) {
  if (x === y) {
    return x !== 0 || 1 / x === 1 / y;
  } else {
    return x !== x && y !== y;
  }
}

const nextState = create(baseState, update);

if (!isEqual(nextState.some.nested.property, baseState.some.nested.property)) {
  sideEffect();
}

[kettanaito]

Thanks for a quick response! I can actually see the patches diff here:

const [nextState, patches] = create(prevState, callback)

patches contains a serialized array of changes performed in a draft! Would that be safe to use? It does seem to work for my use case from what I can see (still exploring).

[unadlib]

I'm not sure about the specific scenario for your check, but generally, using it to check for changing may not be rigorous.

First, it should be noted that in the enablePatches option, when enablePatches: true is set, arrayLengthAssignment defaults to true. For details, you can refer to https://mutative.js.org/docs/api-reference/create.

If you really need to use this solution, I suggest it should be set to false, like this:

{
  enablePatches: {
    arrayLengthAssignment: false,
  },
}

This ensures that every detailed modification to the array will have a detailed patch generated, instead of being replaced by a length modification.

Additionally, comparing possible values could also be an issue. For example,

const [state, patches, inversePatches] = create(
  {
    arr: [0, 1, 2, undefined],
    a: undefined,
  },
  (draft) => {
    delete draft.a;
    draft.arr.length = 3;
  },
  {
    enablePatches: {
      arrayLengthAssignment: false,
    },
  }
);
console.log('mutative patches:', patches);
// mutative patches: [
//   { op: 'remove', path: [ 'arr', 3 ] },
//   { op: 'remove', path: [ 'a' ] }
// ]

In this example, although the patches indicate that the corresponding value was modified, the actual value may not have really been changed.

[kettanaito]

Good point. So draft.array.length = 3 gets interpreted as "the element by third index has been removed", right? And if there are ten elements after that index, will that produce 10 patch objects?

[unadlib]

So draft.array.length = 3 gets interpreted as "the element by third index has been removed", right?

To be precise, if the array exceeds 3 elements, the extra ones are trimmed. If it has fewer than 3, it is filled with undefined to meet the length of 3.

And if there are ten elements after that index, will that produce 10 patch objects?

Yes.