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

Question

这是我的简化商店：

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

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

我的目标是监听“profile”中每一个可能的变化。我想为此使用 MobX 的 reaction，但这有点棘手。

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：link

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

Answer 1

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

import { reaction, toJS } from 'mobx';

// ...

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

Codesandbox

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

How to run reaction callback on every possible change in MobX?

reactjs

mobx

mobx-react

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

How to run reaction callback on every possible change in MobX?

reactjs

mobx

mobx-react

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