Как реализовать побочный эффект на наблюдаемое свойство?

Question

Я относительно новичок в Mobx, и мне нужно автоматически вызывать функцию, когда обновляется этот наблюдаемый массив.Наблюдаемый массив:

 @observable Todos = []

У меня есть много функций для управления этим массивом (addToso, removeTodo, ...), и я хотел бы избежать вызова этой функции в каждой из функций, которые обновляют этомассив.

Например:

@action addTodo(todo, important) {
  const newTodo = {
   id : Math.random(), 
   text : todo,
   isImportant : important,
   completed : false,
   date : Date.now()
  }
  this.Todos.push(newTodo)
}

Я хочу, чтобы Todos обновлял функцию автоматического запуска для сохранения Todos в моей базе данных.

const UpdateDbData = (id, newTodos) => {
 firebase.database().ref(`users/${id}`).update({
   todos : newTodos
 })
.catch(error => console.log(error))
}

Здесь newTodo для текущего значения массива Todos (идентификатор для идентификатора пользователя)

Я тестировал с autorun и reaction, но я не понимаю, как их правильно использовать.

Как это можно сделать?

Answer 1

Я предпочитаю метод mobx.observe: https://mobx.js.org/refguide/observe.html#observe.

, вы можете использовать его следующим образом:

constructor(){
  mobx.observe(this.Todos, (change) => {
   // update your backend data here.
   doSomething(this.Todos);
  })
}

этот метод срабатывает только при изменении массива todos.никакие другие свойства не изменяются.

примечания:

• Вы можете извлечь метод, чтобы можно было легко заставить его выполняться для других свойств (просто используйте mobx.observe для других свойств)
• Если есть много изменений, вы можете обернуть метод в метод debounce
• если вы наблюдаете дважды, метод запускается дважды, поэтому debounce удобен!
• Наблюдайте только за методами getвызывается один раз за (транс) действие.(так же, как автозапуск).

Answer 2

Вы можете использовать autorun, но убедитесь, что наблюдаемый массив MobX превращен в обычный массив с помощью slice:

Пример ( JSBin )

class TodoStore {
  @observable todos = [];

  constructor() {
    autorun(() => {
      const newTodos = this.todos.slice();

      firebase.database().ref(`users/${id}`).update({
        todos : newTodos
      })
      .catch(error => console.log(error))
    })
  }

  @action addTodo(todo, important) {
    const newTodo = {
     id : Math.random(), 
     text : todo,
     isImportant : important,
     completed : false,
     date : Date.now()
    };

    this.todos.push(newTodo);
  }
}

const todoStore = new TodoStore();

setTimeout(() => {
  todoStore.addTodo('A todo', true);

  setTimeout(() => todoStore.todos[0].text = 'A changed todo', 1000);
}, 1000);