对 window 变量做出反应？

Question

所以要检查是否有互联网连接，我们可以使用window.navigator.onLine 如果true，则表示已连接互联网，false 表示互联网已断开连接。

这是我尝试让 MobX 自动发现它并在控制台记录相应的消息。当通过登录 'internet connected' 连接到互联网时，它可以在负载上工作，但是，一旦我断开与互联网的连接，它就不会在控制台记录相应的消息 'internet disconnected'.

const { observable, reaction } = mobx;

class NetStore {    
  constructor() {
    if(window.navigator) {
        reaction(
          () => window.navigator.onLine,
          (value) => {
             value ? console.log('internet connected') 
                   : console.log('internet disconnected');
          },
          true // makes reaction fire immediately
        );
    }
  }
}

const store = new NetStore();

总之，我只是想用这个商店来检测是否有网络连接，所以我可以让用户知道如果没有连接，当有连接时，我想同步应用程序。如何让它在断开互联网连接时显示 'internet disconnected' 消息？反应是这里使用的正确机制还是有更好的方法？

Answer 1

您可能已经发现，MobX 只能对明确标记为 @observable 的属性做出反应，而 window 属性...不是那样。

作为替代方案，online and offline events 可能对此处感兴趣。

const {observable, autorun} = mobx

class NetStore {
  @observable isOnline = window.navigator.onLine

  constructor() {
    window.addEventListener('online', () => this.isOnline = true)
    window.addEventListener('offline', () => this.isOnline = false)

    autorun(() => {
      // Log the online status whenever this.isOnline changes
      console.log(`Online status: ${this.isOnline}`)
    })
  }
}

对 window 变量做出反应？

Reacting to window variable?

javascript

mobx