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数组的当前值（用户ID的ID）

我使用autorun和reaction进行了测试，但我不明白如何正确使用它们。

怎么做？

Answer 1

您可以使用autorun，但请务必使用slice将MobX可观察数组转换为常规数组：

示例（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);

Answer 2

我更喜欢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方法中包装该方法
如果你观察两次方法被触发两次，那么去抖就很方便！
观察方法每次（反式）动作只调用一次。（就像自动运行一样）。

如何对可观察财产实施副作用？

2 个答案: