4、MobX 中的可观察对象、动作与反应

MobX 中的可观察对象、动作与反应

1. 动作（Actions）

虽然可以直接更改可观察对象，但强烈建议使用动作来完成此操作。动作会引发状态变化，用户界面（UI）只需触发动作，并期望某些可观察对象发生变化。动作隐藏了突变应如何发生以及哪些可观察对象会受到影响的细节。

1.1 创建动作

要创建动作，只需将突变函数包装在 action() API 中。以下是一个示例代码：

import { observable, action } from 'mobx';
const cart = observable({
    items: [],
    modified: new Date(),
});
// 创建动作
const addItem = action((name, quantity) => {
    const item = cart.items.find(x => x.name === name);
    if (item) {
        item.quantity += 1;
    } else {
        cart.items.push({ name, quantity });
    }
    cart.modified = new Date();
});
const removeItem = action(name => {
    const item = cart.items.find(x => x.name === name);
    if (item) {
        item.qua