MobX状态管理：深入理解Actions机制-优快云博客

MobX状态管理：深入理解Actions机制

mobx Simple, scalable state management. 项目地址: https://gitcode.com/gh_mirrors/mo/mobx

什么是Actions

在MobX状态管理库中，Actions（动作）是指任何修改应用程序状态的代码片段。与React中的setState类似，Actions是状态变更的唯一合法途径。在MobX的响应式系统中，Actions扮演着至关重要的角色，它们通常由用户交互、网络请求等事件触发。

为什么需要Actions

MobX强制要求通过Actions来修改状态，这带来了两大核心优势：

事务性处理：Actions内部的状态修改会被包裹在一个事务中，确保在Action完成前，中间状态不会触发任何响应（如计算值重新计算或副作用执行）。
代码可维护性：明确标识出状态修改的位置，使代码结构更清晰，便于维护和调试。

声明Actions的多种方式

MobX提供了多种声明Actions的方式，适应不同的编码风格和场景：

1. 使用makeObservable手动声明

import { makeObservable, observable, action } from "mobx"

class Counter {
    count = 0

    constructor() {
        makeObservable(this, {
            count: observable,
            increment: action  // 明确标记为action
        })
    }

    increment() {
        this.count++
        this.count++  // 两个变更在一个事务中完成
    }
}

2. 使用装饰器语法（需要Babel/TypeScript支持）

import { observable, action } from "mobx"

class Counter {
    @observable accessor count = 0

    @action
    increment() {
        this.count++
        this.count++
    }
}

3. 使用makeAutoObservable自动推断

import { makeAutoObservable } from "mobx"

class Counter {
    count = 0

    constructor() {
        makeAutoObservable(this)  // 自动推断方法和字段
    }

    increment() {
        this.count++
        this.count++
    }
}

高级Action用法

绑定Action的this上下文

使用action.bound可以确保方法中的this始终指向当前实例：

class Counter {
    count = 0
    
    constructor() {
        makeObservable(this, {
            increment: action.bound
        })
    }

    increment() {
        this.count++
    }
}

const counter = new Counter()
button.onclick = counter.increment  // this会正确指向counter实例

即时执行的Action

对于一次性操作，可以使用runInAction：

import { runInAction } from "mobx"

runInAction(() => {
    store.value++
    store.value++
})

异步Action处理

异步操作是前端开发中的常见场景，MobX提供了多种处理异步Action的方式：

1. Promise处理

class AsyncStore {
    data = null
    state = "pending"

    fetchData() {
        this.state = "loading"
        fetchData().then(
            action("fetchSuccess", data => {
                this.data = data
                this.state = "success"
            }),
            action("fetchError", error => {
                this.state = "error"
            })
        )
    }
}

2. async/await结合runInAction

class AsyncStore {
    async fetchData() {
        this.state = "loading"
        try {
            const data = await fetchData()
            runInAction(() => {
                this.data = data
                this.state = "success"
            })
        } catch {
            runInAction(() => {
                this.state = "error"
            })
        }
    }
}

3. 使用flow处理生成器函数（推荐）

import { flow, makeAutoObservable } from "mobx"

class AsyncStore {
    data = null
    state = "pending"

    fetchData = flow(function* () {
        this.state = "loading"
        try {
            this.data = yield fetchData()
            this.state = "success"
        } catch {
            this.state = "error"
        }
    })
}

const store = new AsyncStore()
await store.fetchData()  // 自动处理异步流程

flow方式的优势在于：