How to use the mobx.observe function in mobx

onInit() {
        // 监听当前编辑组件变化
        observe(this.viewport, 'currentEditComponentMapUniqueKey', (newValue: string, oldValue: string) => {
            // 过 150 毫秒再显示编辑区域，不让动画被阻塞
            setTimeout(() => {
                this.viewport.showEditComponents = !!newValue
            }, 150)

            const selectClass = 'gaea-selected'

            // 把上一个元素选中样式置空
            if (oldValue !== null) {
                const prevEditDom = this.viewport.componentDomInstances.get(oldValue)
                if (hasClass(prevEditDom, selectClass)) {
                    removeClass(prevEditDom, selectClass)
                }
            }

            // 设置新元素为选中样式

return null;
            }
            if (change.newValue.length === 6) {
                // 补全缺少的 '#' 前缀
                change.newValue = '#' + change.newValue;
                notification.warn({message: '警告提示', description: '缺少#前缀'});
                return change;
            }
            if (change.newValue.length === 7) {
                return change;
            }
            if (change.newValue.length > 10) this.disposer(); // 不再拦截今后的任何变化
            notification.error({message: '错误提示', description: change.newValue + ' 不是一个合法的颜色值'});
        });

        this.disposer2 = observe(this.style, 'color', (change) => {
            notification.success({message: '颜色设置成功', description:
                `更新类型：${change.type}， 
                 输入的值：${change.newValue}，
                 旧的值：${change.oldValue}
            `});
        });

    }

async setup() {
    const intervals = [];

    // update icon only on mac
    if (window.process.platform === 'darwin') {
      intervals.push(observe(this.props.store.userStore, 'portfolio', async change => {
        const { portfolio } = this.props.store.userStore;
        this.props.store.userStore.prevEquity = change.oldValue.equity;
        // set image
        const image = new Jimp(100, 20);
        const font = await Jimp.loadFont(Jimp.FONT_SANS_14_BLACK);
        const text = `${num(portfolio.todayChangePercent, { after: '%' })}`;
        image.print(font, 5, 0, text);
        image.color([ { apply: portfolio.todayChange >= 0 ? 'green' : 'red', params: [ 180 ] } ]);
        image.crop(0, 0, text.length * 10, 20);
        image.write(trayImagePath, () => ipcRenderer.send('msg', { type: 'tray' }));
      }));
    }

    await this.updatePositions();
    await this.updateStocks();

on(event, callback) {
    observe(Events.getRunning(), ({ name, oldValue, object }) => {
      if (!event.includes('@')) return;

      const $event = _.split(event, '@');
      const $path = Events.path(name);

      if ($event[0] === name
        && $event[1] === $path
        && oldValue && !object[name]) {
        callback({ form: this, path: $path });
      }
    });
  }

const subscribe = ({command, handler}) => {
    observe(server.commands[command], ({added}) => {
      const draw = ({payload}) => handler(payload)
      R.forEach(draw, added)
    })
  }

observableArray.forEach(observableItem => {
    const disposer = observe(observableItem, change => {
      emitChange({
        id,
        isMobx: true,
        value: toJS(thingToEmit),
        action: change
      });
    });
    arrayItemObserverDisposables.push(disposer);
  });

function updateListenerElement(element, listener) {
    listener.watch = observe(element.father, (change) => {
        listener.callback(change.name, change.newValue)
    })
}

watchTypeChange() {
    observe(
      computed(() => this.activeContentType),
      ({ newValue, oldValue }) => {
        this.handleTypeChange(newValue, oldValue as ActiveContentTypeValue)
      }
    )
  }