定义数据存储¶

import {makeAutoObservable, runInAction, reaction} from "mobx"
import uuid from "node-uuid"

export class TodoStore {
    authorStore
    transportLayer
    todos = []
    isLoading = true

    constructor(transportLayer, authorStore) {
        makeAutoObservable(this)
        this.authorStore = authorStore // 可解析作者的存储。
        this.transportLayer = transportLayer // 可以发起服务器请求的东西。
        this.transportLayer.onReceiveTodoUpdate(updatedTodo =>
            this.updateTodoFromServer(updatedTodo)
        )
        this.loadTodos()
    }

    // 从服务器获取所有 `Todo`。
    loadTodos() {
        this.isLoading = true
        this.transportLayer.fetchTodos().then(fetchedTodos => {
            runInAction(() => {
                fetchedTodos.forEach(json => this.updateTodoFromServer(json))
                this.isLoading = false
            })
        })
    }

    // 使用来自服务器的信息更新一个 `Todo`。确保每个 `Todo` 只会存在一份。
    // 可能会新建一个 `Todo`、更新已有的 `Todo`，或者在该 `Todo` 已在服务器端被删除时将其移除。
    updateTodoFromServer(json) {
        let todo = this.todos.find(todo => todo.id === json.id)
        if (!todo) {
            todo = new Todo(this, json.id)
            this.todos.push(todo)
        }
        if (json.isDeleted) {
            this.removeTodo(todo)
        } else {
            todo.updateFromJson(json)
        }
    }

    // 在客户端和服务器端创建一个全新的 `Todo`。
    createTodo() {
        const todo = new Todo(this)
        this.todos.push(todo)
        return todo
    }

    // 某个 `Todo` 不知为何被删除了，把它从客户端内存中清理掉。
    removeTodo(todo) {
        this.todos.splice(this.todos.indexOf(todo), 1)
        todo.dispose()
    }
}

// `Todo` 领域对象。
export class Todo {
    id = null // 此 `Todo` 的唯一 `id`，不可变。
    completed = false
    task = ""
    author = null // 对 `Author` 对象的引用（来自 `authorStore`）。
    store = null
    autoSave = true // 用于指示将此 Todo 中的更改提交到服务器的标记。
    saveHandler = null // 处理自动保存此 Todo 的副作用（dispose）。

    constructor(store, id = uuid.v4()) {
        makeAutoObservable(this, {
            id: false,
            store: false,
            autoSave: false,
            saveHandler: false,
            dispose: false
        })
        this.store = store
        this.id = id

        this.saveHandler = reaction(
            () => this.asJson, // 观察 JSON 中使用到的所有内容。
            json => {
                // 如果 `autoSave` 为 true，就把 JSON 发送到服务器。
                if (this.autoSave) {
                    this.store.transportLayer.saveTodo(json)
                }
            }
        )
    }

    // 从客户端和服务器端移除这个 `Todo`。
    delete() {
        this.store.transportLayer.deleteTodo(this.id)
        this.store.removeTodo(this)
    }

    get asJson() {
        return {
            id: this.id,
            completed: this.completed,
            task: this.task,
            authorId: this.author ? this.author.id : null
        }
    }

    // 用服务器端的信息更新此 `Todo`。
    updateFromJson(json) {
        this.autoSave = false // 防止把我们的更改回传到服务器。
        this.completed = json.completed
        this.task = json.task
        this.author = this.store.authorStore.resolveAuthor(json.authorId)
        this.autoSave = true
    }

    // 清理 `observer`。
    dispose() {
        this.saveHandler()
    }
}

import { makeAutoObservable, observable, computed } from "mobx"

export class UiState {
    language = "en_US"
    pendingRequestCount = 0

    // `.struct` 确保除非 `dimensions` 对象以 `deepEqual` 的方式发生变化，
    // 否则不会触发 `observer` 的通知。
    windowDimensions = {
        width: window.innerWidth,
        height: window.innerHeight
    }

    constructor() {
        makeAutoObservable(this, { windowDimensions: observable.struct })
        window.onresize = () => {
            this.windowDimensions = getWindowDimensions()
        }
    }

    get appIsInSync() {
        return this.pendingRequestCount === 0
    }
}

class RootStore {
    constructor() {
        this.userStore = new UserStore(this)
        this.todoStore = new TodoStore(this)
    }
}

class UserStore {
    constructor(rootStore) {
        this.rootStore = rootStore
    }

    getTodos(user) {
        // Access todoStore through the root store.
        return this.rootStore.todoStore.todos.filter(todo => todo.author === user)
    }
}

class TodoStore {
    todos = []
    rootStore

    constructor(rootStore) {
        makeAutoObservable(this)
        this.rootStore = rootStore
    }
}