Mobx-state-tree использует реакции mobx внутри дерева — хорошая или плохая практика?
У меня есть статья, которая представляет собой объект дерева состояний mobx, и я использую ее в приложении для реагирования.
Это действие внутри моего дерева
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? Если да, то где правильно использовать реакции?
Я могу определить реакцию внутри компонента реакции, но они будут вне дерева. Это хорошая практика, чтобы быть вне дерева?
Ответы 1
Вы можете использовать действия 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
};
});
У меня та же проблема, я протестировал код, похоже, через 0,5 с он вызовет updateProduct(), даже если продукт меняется в клиенте.