mobx#autorun JavaScript Examples

CloudProvider = function (props) {
  if (!_initialized) {
    IpcRenderer.getInstance().listen(
      ipcEvents.broadcast.CLOUD_STATUS_CHANGE,
      _handleCloudStatusChange
    );
    IpcRenderer.getInstance().listen(
      ipcEvents.broadcast.CLOUD_LOADED_CHANGE,
      _handleCloudLoadedChange
    );
    IpcRenderer.getInstance().listen(
      ipcEvents.broadcast.CLOUD_FETCHING_CHANGE,
      _handleCloudFetchingChange
    );
    _initialized = true;
  }

  // NOTE: since the state is passed directly (by reference) into the context
  //  returned by the provider, even the initial state should be a clone of the
  //  `store` so that we consistently return a `state` property (in the context)
  //  that is a shallow clone of the `store`
  const [state, setState] = useState(pr.clone());
  const value = useMemo(() => [state, setState], [state]);

  pr.setState = setState;

  // @see https://mobx.js.org/reactions.html#autorun
  // NOTE: I have no idea why, but using a reaction() like we do in the SyncStore
  //  on MAIN (which works fine there) is DOA here on RENDERER: the reaction is
  //  never called except on first-run; only autorun() works
  autorun(_handleAutoRun);

  return <CloudContext.Provider value={value} {...props} />;
}

componentDidMount() {
    Keyboard.addListener("keyboardDidHide", this._handleKeyboardDidHide);
    AppState.addEventListener("change", this._handleAppStateChange);
    setTimeout(() => {
      this.textinput && this.textinput.focus();
    }, 600);
    autorun(() => {
      if (this.inputCode.length == 6) {
        console.log("completion", this.inputCode);
        if (this.props.onCompletion && this.completionCode != this.inputCode) {
          this.completionCode = this.inputCode;
          this.props.onCompletion(this.inputCode);
        }
      }
    });
  }

constructor(props) {
    super(props);
    this.init();
    autorun(() => {
      this.props.navigator.setStyle({
        navBarBackgroundColor: this.backgroundColor,
      });
    });
  }

async connectedCallback() {
		super.connectedCallback();
		this.apiClient = this.requestDependency('content-service-client');
		autorun(async() => {
			if (this.rootStore.routingStore.page === 'course-videos'
				&& this.rootStore.routingStore.subView
			) {
				this._updateBreadcrumbs();
				this._loading = true;
				this._content = await this.apiClient.getContent(this.rootStore.routingStore.subView);
				this._sourceUrl = (await this.apiClient.getSignedUrl(this.rootStore.routingStore.subView)).value;
				this._loading = false;
			}
		});
	}

async connectedCallback() {
		super.connectedCallback();
		this.apiClient = this.requestDependency('content-service-client');
		autorun(async() => {
			if (this.rootStore.routingStore.page === 'course-videos'
				&& !this.rootStore.routingStore.subView
			) {
				await this._handleVideoSearched();
			}
		});
	}

async connectedCallback() {
		super.connectedCallback();
		this.apiClient = this.requestDependency('content-service-client');
		this.userBrightspaceClient = this.requestDependency('user-brightspace-client');
		autorun(async() => {
			if (this.rootStore.routingStore.page === 'producer'
				&& this.rootStore.routingStore.params.id
			) {
				this._loading = true;
				this._content = await this.apiClient.getContent(this.rootStore.routingStore.params.id);
				this._sourceUrl = (await this.apiClient.getSignedUrl(this.rootStore.routingStore.params.id)).value;
				this._setupLanguages();
				this._metadata = await this.apiClient.getMetadata({
					contentId: this._content.id,
					revisionId: 'latest',
					draft: true
				});
				this._loading = false;
			}
		});
	}

componentDidMount() {
    /**
     * 监听 任务情况
     */
    this.triggerTaskTimer = setInterval(this.triggerTaskRun, DEBOUNCE_TIME);
    /**
     * 监听 mobx 更新
     * 在 templateWidth 与 templateHigh 更新后 更新编辑器
     */
    this.disposer = autorun(() => {
      this.autoUpdateEditor({
        templateWidth: this.templateWidth,
        templateHigh: this.templateHigh,
      });
    });
    this.runInitAll();
  }

constructor(network, mode = 'direct') {
        this.network = network
        this.mode = mode
        this.asset = ['XLM', 'XLM']
        this.amount = ['0', '0']
        this.conversionSlippage = 0.5
        makeAutoObservable(this)

        autorun(() => {
            const {
                destination,
                mode,
                asset,
                amount,
                conversionDirection,
                conversionSlippage,
                currentLedgerSequence
            } = this
            this.recalculateSwap()
        })

        this.findConversionPath = debounce(400, false, this.findConversionPath.bind(this))
    }

RuntimeInit = observer(({ children }) => {
  const appStore = useStore()
  const { settings, appRuntime } = appStore

  React.useEffect(() => {
    appRuntime.initEcdhChannel()
  }, [])

  useEffect(
    () =>
      reaction(
        () => settings.phalaTeeApiUrl,
        () => {
          appRuntime.resetNetwork()
        }),
    []
  )

  useEffect(
    () =>
      autorun(
        () => {
          if (!(appRuntime.ecdhShouldJoin && appRuntime.ecdhChannel && appRuntime.info?.ecdhPublicKey)) {
            return
          }
          appRuntime.joinEcdhChannel()
        }),
    []
  )

  useEffect(
    () =>
      autorun(
        () => {
          if (!(settings.phalaTeeApiUrl && appRuntime.ecdhChannel)) {
            return
          }
          appRuntime.initPApi(settings.phalaTeeApiUrl)
        }),
    []
  )

  return <>
    <RuntimeLifecycle />
    {children}
  </>
})

constructor() {
    this.pollingTask();
    autorun(() => {
      setApplicationIconBadgeNumber(this.totalCount);
    });
  }