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

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

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

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

  this.updateProduct()
},

И событие

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

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

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

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

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

Это хорошая практика - добавлять реакции внутри дерева состояний mobx? Если да, то где лучше всего использовать реакции?

Я могу определить реакцию внутри компонента реакции, но для них это будет вне дерева. Хорошая практика - находиться вне дерева?


reactjs mobx mobx-react mobx-state-tree
person etudor    schedule 14.03.2019    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вы можете использовать действия 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
  };
});
person Tholle    schedule 14.03.2019
comment
У меня такая же проблема, я тестировал код, похоже, через 0,5 с он вызовет updateProduct (), даже если продукт меняется в клиенте - person H294; 06.03.2020