是否可以观察特定映射条目的mobx-state-tree事件

Question

是否可以这样做：

observe(props.store.zone.players[props.socket_id], (change) => {

  ...

})

我想要监听组件的每个特定实例上的事件。

以下是区域存储：

const ZoneState = types
  .model({
    name: types.optional(types.string, ""),
    players: types.map(PlayerState),
  })
  .actions((self) => ({
    syncPlayer(params) {
      const player = self.players.get(params.id);
      const oldPlayerData = toJS(player);
      self.players.put(params);
    },

  }));

还有播放器商店

import { types } from "mobx-state-tree";

const PlayerState = types
  .model({
    id: types.identifier,
    socket_id: types.optional(types.string, ""),
    x: types.integer,
    z: types.integer,
    name: types.optional(types.string, "Unknown One"),
  })
  .actions((self) => ({
    sync(params) {
      self.x = params.x;
      self.z = params.z;
    },
  }));

export default PlayerState;

Answer 1

例如，您可以使用observe或autorun在特定映射条目更改时运行一些代码。

示例

// ...

const zoneState = ZoneState.create();

zoneState.syncPlayer({ id: "1", socket_id: "1", x: 1, z: 2, name: "test" });

observe(zoneState.players.get("1"), (change) => {
  console.log("observe", change);
});

autorun(() => {
  console.log("autorun", zoneState.players.get("1"));
});

zoneState.syncPlayer({ id: "1", socket_id: "1", x: 1, z: 2, name: "test 2" });