How to use the mobx.reaction function in mobx

ngOnInit() {
    this.virtualScroll = this.treeModel.virtualScroll;
    this._dispose = [
      // return node indexes so we can compare structurally,
      reaction(() => {
        return this.virtualScroll.getViewportNodes(this.nodes).map(n => n.index);
      }, (nodeIndexes) => {
          this.viewportNodes = nodeIndexes.map((i) => this.nodes[i]);
        }, { compareStructural: true, fireImmediately: true } as any
      ),
      reaction(() => this.nodes, (nodes) => {
        this.viewportNodes = this.virtualScroll.getViewportNodes(nodes);
      })
    ];
  }

reloadOnBlocksCountChange() {
    this.forceDisposer = reaction(
      () => this.props.rootStore.blockStore.blocksCount,
      () => {
        this.props.rootStore.uiStore.setRepoVotesTableData({ force: true });
      }
    );
  }
  stopReload() {

store.pointSetsUI.sizes.push(defaultPointSetSize);
        }
      })
      const selectedPointSetIndex = store.pointSetsUI.selectedPointSetIndex;
      sizeElement.value = store.pointSetsUI.sizes[selectedPointSetIndex];
    }
  )

  reaction(() => {
    return store.pointSetsUI.selectedPointSetIndex;
    },
    (selectedPointSetIndex) => {
      sizeElement.value = store.pointSetsUI.sizes[selectedPointSetIndex];
    });

  reaction(() => {
    return store.pointSetsUI.sizes.slice();
  },
    (sizes) => {
      const selectedPointSetIndex = store.pointSetsUI.selectedPointSetIndex;
      const value = sizes[selectedPointSetIndex];
      store.pointSetsUI.representationProxies[selectedPointSetIndex].setPointSize(value)
      store.renderWindow.render();
      sizeElement.value = value;
    });

  sizeElement.addEventListener('input', (event) => {
      event.preventDefault();
      event.stopPropagation();
      const selectedPointSetIndex = store.pointSetsUI.selectedPointSetIndex;
      store.pointSetsUI.sizes[selectedPointSetIndex] = Number(event.target.value);
    });

relates.filter(item=>typeof item.handler === 'function').forEach((relateItem)=>{
                const callback = function(newVal){
                    if(this.$refs[field]){
                        relateItem.handler.call(this.$refs[field],newVal);
                    }else{
                        setTimeout(()=>{
                            callback.call(this,newVal);
                        },0);
                    }
                };

                const unwatch = reaction(()=>{
                    return this.getRelateData(relateItem);
                },callback.bind(this),relateItem.config)

                this.recordUnwatchs.push(unwatch);

            });

public constructor(
        private readonly appStore: BaseStore,
        private readonly snack: SnackReporter
    ) {
        reaction(() => appStore.getItems(), this.createEmptyStatesForApps);
    }

const { visPointer } = this.props;

        return visPointer.position;
      },
      position => {
        tween({
          from: this.position.get(),
          to: position,
          duration: 1000,
          ease: easing.easeInOut,
        }).start(this.position);
      },
      { equals: comparer.structural },
    );

    this.disposeLinePath = reaction(
      () => this.linePath,
      linePath => {
        const prevLinePath = this.linePathValue.get();

        parallel(
          ...linePath.map((lineSegment, index) =>
            tween({
              from: prevLinePath[index],
              to: lineSegment,
              duration: 1000,
              ease: easing.easeInOut,
            }),
          ),
        ).start(this.linePathValue);
      },
      { equals: comparer.structural },

constructor(props: ILanguageDetailIconProps) {
    super(props)
    reaction(
      () => this.props.close,
      close => this.updateOpacityAnimate(close ? 1 : 0)
    )
  }

private startReactions() {
    this.autosaveTimer = window.setInterval(() => {
      tabsStorage.saveTabs(this.tabs.map(_ => _.toJSON()));
    }, 30000);

    this.changeTabsReaction = reaction(
      () => this.tabs,
      tabs => {
        tabsStorage.saveTabs(tabs.map(_ => _.toJSON()));
      }
    );

    this.changeActiveTabReaction = reaction(
      () => this.activeTab,
      tab => {
        this.uiStore.resetTabViewState();
        tabsStorage.saveActiveTabId(tab.map(t => t.id).orUndefined());
      }
    );
  }