Open benjamind opened 1 year ago
Use runInAction() in async.
@action
async deleteComment(id: number): Promise<void> {
try {
await api.delete(`comments/${id}`);
} catch (error) {
console.error(error);
return;
}
const changedCommentThreads = { ...this.commentThreads };
changedCommentThreads.data[id] = null;
runInAction(() => {
this.commentThreads = { ...changedCommentThreads };
});
}
Not quite the same thing, thats an async action. In an async directive like asyncAppend that will invoke the template and update the DOM in an asynchronous callback that is outside of the reaction that is being used to capture template usage of mobx observables. Therefore observables inside of the asyncAppend
callback will not cause further updates to the template. This can be quite surprising given the magic that happens elsewhere.
Thanks a lot Benjamin, I was about to lose my mind.
Expected Behaviour
Using async directives should 'just work' with the rendering component updating whenever an observable inside of the async directive is updated. The async directive of course should do what it always does.
Actual Behaviour
Mobx observables are not tracked within the callbacks of renders invoked by async directives like
when
anduntil
.Couple of possible approaches to fixing/workaround this:
setValue
within their render tree. This is a much bigger change at the core of the library and would likely need updates to the AsyncDirective API.