[MST] Use Volatile State and Lifecycle Methods to Manage Private State

MST has a pretty unique feature: It allows you to capture private state on models, and manage this state by using lifecycle hooks. For example by setting up a WebSocket connection and disposing of the connection automatically as soon as the instance gets removed from the store. In this lesson, we will leverage cancellable fetches to abort in-flight requests when appropriate

In this lesson you will learn:

Aborting window.fetch requests :-).

Storing private, volatile, internal state in the function closure

A second life-cycle hook: beforeDestroy

The whole point for this post is showing how to abort fetch request:

export const Group = types
.model({
users: types.map(User)
})
.actions(self => {
let controller

return {
afterCreate() {
self.load()
},
load: flow(function* load() {
controller = window.AbortController && new window.AbortController()
try {
const response = yield window.fetch(`http://localhost:3001/users`, {
signal: controller && controller.signal
})
applySnapshot(self.users, yield response.json())
console.log("success")
} catch (e) {
console.log("aborted", e.name)
}
}),
reload() {
if (controller) controller.abort()
self.load()
},
beforeDestroy() {
if (controller) controller.abort()
}
}
})

https://developer.mozilla.org/en-US/docs/Web/API/AbortController