Обнаружение изменения наблюдаемого mobx

Можно ли каким-либо образом обнаружить наблюдаемые изменения?

Например, скажем, у вас есть это:

@observable myObject = [{id: 1, name: 'apples'}, {id: 2, name: 'banana' }]

А позже, при некотором вводе пользователя, значения меняются. Как я могу легко это обнаружить?

Я хочу добавить глобальную кнопку «сохранить», но сделать ее доступной для нажатия только в том случае, если эта наблюдаемая изменилась с момента начальной загрузки.

Мое текущее решение - добавить еще один наблюдаемый myObjectChanged, который возвращает true / false, и везде, где компонент изменяет данные в myObject, я также добавляю строку, которая изменяет myObjectChanged на true. И если нажать кнопку сохранения, он сохраняет и изменяет эту наблюдаемую обратно на false.

Это приводит к тому, что повсюду разбросано множество дополнительных строк кода. Есть ли способ сделать это лучше / чище?


reactjs mobx mobx-react react-jsx
person capvidel    schedule 11.10.2016    source источник
comment
Я чувствую, что вы можете использовать здесь любой из computed, observe, spy или autorun в зависимости от уровня детализации, который вам нужен в вашем наблюдении. Вот простой пример грязной проверки формы с помощью computed github.com/mobxjs/mobx/issues / 164   -  person m0meni    schedule 12.10.2016

Ответы (2)


arrow_upward
2
arrow_downward

Для этого можно использовать autorun:

@observable myObject = [{id: 1, name: 'apples'}, {id: 2, name: 'banana' }]
@observable state = { dirty: false }

let firstAutorun = true;
autorun(() => {
  // `JSON.stringify` will touch all properties of `myObject` so
  // they are automatically observed.
  const json = JSON.stringify(myObject);
  if (!firstAutorun) {
    state.dirty = true;
  }
  firstAutorun = false;
});
person Mouad Debbar    schedule 12.10.2016
comment
Это действительно хорошо работает, спасибо! Одна мелочь заключается в том, что firstAutorun должен быть разрешен, поскольку const не позволяет ему измениться на false. - person capvidel; 12.10.2016
comment
Ой, теперь это исправлено! - person Mouad Debbar; 12.10.2016

arrow_upward
0
arrow_downward

Создайте действие, которое отправит на myObject и установит myObjectChanged

@action add(item) {
    this.myObject.push(item);
    this.myObjectChanged = true;
}
person ajma    schedule 12.10.2016