[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