Mobx - runInAction() 用法。为什么我们需要它

服务器

为什么我们需要 Mobx - runInAction()？

在使用 Mobx 进行状态管理时，我们经常需要在异步操作中更新状态。然而，Mobx 的响应式机制只能在动作（action）中触发状态的更新。这就导致了一个问题：在异步操作中，我们无法直接使用动作去修改状态。为了解决这个问题，Mobx 提供了一个特殊的函数——runInAction()。

runInAction() 的作用

runInAction() 函数的主要作用是在异步操作中使用动作来更新状态。它接受一个函数作为参数，该函数中包含了需要执行的状态更新操作。当异步操作完成后，我们可以使用 runInAction() 来确保状态的更新是在动作中进行的，从而保证 Mobx 的响应式机制能够正常运作。

案例代码

假设我们有一个计数器的应用程序，我们通过点击按钮来增加计数器的值。在点击按钮后，我们需要通过异步请求来获取服务器返回的新值，并将其更新到计数器中。

首先，我们需要定义一个 CounterStore 类来管理计数器的状态：

Javascript
import { observable, action, runInAction } from 'mobx';
class CounterStore {
  @observable count = 0;
  @action async fetchData() {
    const response = awAIt fetch('https://api.example.com/counter');
    const data = awAIt response.JSon();
    
    runInAction(() => {
      this.count = data.count;
    });
  }
  @action increaseCount() {
    this.count++;
  }
}
export default new CounterStore();

在上述代码中，我们使用 runInAction() 来更新计数器的值。在 fetchData() 函数中，我们首先发送异步请求来获取服务器返回的新值，然后在 runInAction() 中使用动作来更新计数器的值。

接下来，我们可以在 UI 组件中使用 CounterStore 来管理计数器的状态：

Javascript
import React from 'react';
import { observer } from 'mobx-react';
import counterStore from './CounterStore';
const Counter = observer(() => {
  const handleButtonClick = async () => {
    awAIt counterStore.fetchData();
  };
  return (
    <div>
      <div>Count: {counterStore.count}</div>
      <button onClick={handleButtonClick}>Fetch Data</button>
    </div>
  );
});
export default Counter;

在上述代码中，我们使用 observer() 函数来将 Counter 组件转化为一个响应式组件。当计数器的值发生改变时，UI 会自动更新。

在异步操作中，我们无法直接使用动作来更新状态。使用 Mobx 的 runInAction() 函数可以解决这个问题，它允许我们在异步操作中使用动作来更新状态。通过使用 runInAction()，我们可以确保状态的更新是在动作中进行的，从而保证 Mobx 的响应式机制能够正常工作。