createViewModel from 'mobx-utils' gives undesired behavior of dirty state

26 Views Asked by At

The createViewModel dirty state does not work properly. On assigning the address property to some other address, createViewModel rightly judge the dirty value to be true however when I revert to the old value createViewModel still shows dirty as true, which is wrong.

I have also explicitly assigned address property as observable.struct so that real property gets compared and not the references.

Can someone please help, have been stuck with this problem for hours. I'm using [email protected] and [email protected] versions.

Code Sandbox Link: https://codesandbox.io/p/devbox/createviewmodel-64z5qz?file=%2Fsrc%2Findex.mjs%3A28%2C70

const { autorun, action, observable } = require("mobx");
const { createViewModel } = require("mobx-utils");

function Todo() {
  const person = observable({ name: 'tarun', address: { firstLine: 'this is the main address', secondLine: 'second thing' } }, { address: observable.struct });

  const personViewModel = createViewModel(person);

  autorun(() => {
    console.log('personViewModel?.address.firstLine', personViewModel?.address.firstLine);
    console.log('personViewModel?.address.secondLine', personViewModel?.address.secondLine)

    console.log('personViewModel.isDirty', personViewModel?.isDirty)
  })

  const update = action((address) => {
    personViewModel.address = address;
  })

  return {
    update
  }
}

const { update } = Todo();

// isDirty becomes true which is correct
update({ firstLine: 'edit first 1', secondLine: 'edit second 1' });

// when the address is reset 'isDirty' still shows true
update({ firstLine: 'this is the main address', secondLine: 'second thing' })
0

There are 0 best solutions below