如何对 MobX 中每个可能的变化运行反应回调？

Question

这是我的简化商店：

export class ProfileStore {
  profile = {
    id: 1,
    name: "Tommy",
    todos: [
      {
        value: "Clean the room",
        done: false
      }
    ]
  };

  constructor() {
    makeObservable(this, {
      profile: observable,
    });
  }
}

我的目标是倾听可观察到的“配置文件”内的每一个可能的变化。我想使用reactionMobX 来实现此目的，但这有点棘手。

reaction(
      () => this.profile,
      () => {
        console.log("change");
      }
    );

上面的示例根本不起作用，因为 MobX 不会对值做出反应，而是对属性和引用做出反应。所以我把它改成这样：

reaction(
      () => ({
        id: this.profile.id,
        name: this.profile.name,
        todos: this.profile.todos.slice()
      }),
      () => {
        console.log("change");
      }
    );

它开始起作用，但并不完全起作用。除了切换待办事项中的属性之外，它还会监听所有更改done。如果我添加另一个属性，我需要在这里列出，这有点乏味。

处理这个问题的最佳方法是什么？如何应对每一个可能的变化？

我为此制作了一个codesandbox：链接

尝试按下按钮并查看计数器。

Answer 1

要对每个可能的更改做出反应，您需要取消引用每个属性。例如，为此，您可以使用toJS方法来序列化profile对象。（甚至是原生的JSON.stringify）：

import { reaction, toJS } from 'mobx';

// ...

    reaction(
      () => toJS(profileStore.profile),
      () => {
        setReactionCounter((state) => state + 1);
      }
    );

代码沙箱