MobX 中 runInAction 的威力:构建原子性状态更新

"原子性状态更新"这个词可以很好地概括 runInAction 的核心功能,即将一组相关的状态更新作为一个整体,要么全部成功,要么全部失败。这种特性对于复杂的异步操作和状态管理非常重要。可以帮助我们构建更加可靠和可预测的 React 应用程序。

怎么理解原子性操作

"原子性操作"是一个非常重要的概念,它描述了一组操作要么全部成功,要么全部失败,中间不会出现部分成功的情况。这样可以确保系统的一致性和完整性。

在MobX中,使用runInAction来包裹状态更新操作(把一组状态放在一起包起来),就是为了确保这些操作是原子性的。下面来看2个例子。

例1: 计数器应用

举一个更简单的例子来解释runInAction的作用

假设我们有一个简单的计数器应用,当我们点击按钮时,计数器的值会增加。但是,我们希望在增加计数之前,先模拟一个1秒钟的异步操作。

这里是使用runInAction的例子:

import { observable, action } from 'mobx';

class CounterStore {
  @observable count = 0;

  @action
  increaseCount = () => {
    // 模拟一个1秒钟的异步操作
    setTimeout(() => {
      // 在这里使用 runInAction 包裹状态更新
      runInAction(() => {
        this.count++;
      });
    }, 1000);
  };
}

const counterStore = new CounterStore();

// 在组件中使用
import { observer } from 'mobx-react-lite';

const CounterComponent = observer(() => {
  return (
    <div>
      <p>当前计数: {counterStore.count}</p>
      <button onClick={counterStore.increaseCount}>增加计数</button>
    </div>
  );
});

在这个例子中,当我们点击"增加计数"按钮时,会触发increaseCountaction。这个action中有一个模拟的1秒钟异步操作,在这个操作完成后,我们使用runInAction来更新count状态。

为什么要使用runInAction呢?主要有以下两个原因:

1. 确保状态更新的原子性: 如果不使用runInAction,当异步操作完成时,count的更新可能会与组件的重新渲染发生竞争条件,导致界面不一致。而runInAction可以确保状态更新是一个原子性操作。

2. 自动追踪依赖: 当在runInAction中更新状态时,MobX会自动追踪这些状态的依赖关系。这意味着,只有依赖于count状态的组件,才会在count更新时重新渲染。

例2: 列表加载时显示、隐藏动画

下面是一个示例,展示了如何在异步操作中使用runInAction:

import { runInAction, observable } from 'mobx';

class TodoStore {
  @observable todos = [];
  @observable loading = false;
  @observable error = null;

  async fetchTodos() {
    this.loading = true;
    try {
      const response = await fetch('/api/todos');
      const data = await response.json();
      runInAction(() => {
        this.todos = data;
        this.loading = false;
        this.error = null;
      });
    } catch (err) {
      runInAction(() => {
        this.error = err.message;
        this.loading = false;
      });
    }
  }
}

在这个例子中,当fetchTodos方法被调用时,它会先设置loading状态为true。然后,在异步操作完成后,将结果数据更新到todos状态,并将loading和error状态分别设置为false和null。

值得注意的是,这些状态更新都是在runInAction中完成的,这确保了状态更新的原子性,同时也确保了相关的观察者会自动更新。

runInAction的主要作用

1. 原子性操作: runInAction确保了在执行内部代码时,状态的更新是原子性的,即要么全部执行成功,要么全部失败。这有助于避免部分状态更新导致的一致性问题（如异步中的状态更新可能会与组件的重新渲染发生竞争条件,导致界面不一致）。而runInAction可以确保状态更新是一个原子性操作。

2. 自动追踪依赖: 当在runInAction中访问可观察状态时,MobX会自动追踪这些依赖关系。这意味着当这些依赖发生变化时,相关的观察者(如React组件)会自动更新。

3. 异步代码的状态管理: 在异步操作中,我们通常需要维护一些状态,如加载状态、错误状态等。使用runInAction可以将这些状态的更新包裹在一个原子性操作中,使得状态管理更加清晰和可靠。

总之,runInAction是MobX中一个非常有用的工具,它可以帮助我们在异步操作中更好地管理状态,提高代码的可靠性和可维护性。