State management comparison - mobx - Models

mobx.models.ts

export class TodoList {
    @observable.shallow list: Todo[] = [];

    constructor() {
        autorun(() => {
            this.load();
        });
    }

    @action
    async load() {
        const [err, getTodosResponse] = await usePromise(
            fetch(`${apiUrl}/todos`)
        );
        if (err || !getTodosResponse) {
            return;
        }

        const [err2, todosJson] = await usePromise(
            getTodosResponse.json()
        );
        if (err2 || !todosJson) {
            return;
        }

        const todos = todosJson.map((t: any) => new Todo(t.id, t.content));

        runInAction(() => {
            this.list = todos;
        });
    }
}