Mobx-state-tree использует реакции mobx внутри дерева - хорошая или плохая практика? - PullRequest
Новая
       20

Mobx-state-tree использует реакции mobx внутри дерева - хорошая или плохая практика?

1 голос
/ 14 марта 2019

У меня есть статья, представляющая собой объект mobx-state-tree, и я использую его в приложении реагирования.

Это действие внутри моего дерева 

setId(id: string) {
  self.id = id

  this.updateProduct()
},

И событие 

 <input
  value={comp.productId}
  onChange={(e) => comp.setId(e.target.value)}
/>

Проблема в том, что this.updateProduct() запускается при каждом изменении и выполняет асинхронный вызов после каждого нажатия клавиши.

Я бы хотел воспользоваться реакцией Мобса и использовать что-то вроде 

reaction(
() => ({
  id: this.id
}),
() => {
  this.updateProduct()
}, {
  delay: 500 // this is the key thing
})

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

Полезно ли добавлять реакции в дерево состояний mobx? Если да, где находится правильное место для использования реакций?

Я могу определить реакцию внутри реактивного компонента, но они будут вне дерева. Это хорошая практика, чтобы быть вне дерева?

1 Ответ

1 голос
/ 14 марта 2019

Вы можете использовать действия afterCreate и beforeDestroy для создания и удаления реакции.

Пример 

.actions(self => {
  let dispose;

  const afterCreate = () => {
    dispose = reaction(
      () => ({
        id: this.id
      }),
      () => {
        this.updateProduct();
      },
      {
        delay: 500
      }
    );
  };

  const beforeDestroy = dispose;

  return {
    afterCreate,
    beforeDestroy
  };
});

Вы также можете использовать помощник addDisposer, поэтому нет необходимости в ручной очистке в beforeDestroy, если хотите. 

.actions(self => {
  function afterCreate() {
    const dispose = reaction(
      () => ({
        id: this.id
      }),
      () => {
        this.updateProduct();
      },
      {
        delay: 500
      }
    );

    addDisposer(self, dispose);
  }

  return {
    afterCreate
  };
});
...