Question

因此，为了检查是否存在互联网连接，我们可以使用window.navigator.onLine如果 true ，则表示已连接互联网， false 表示互联网已断开连接。< / p>

这是我尝试自动让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的属性作出反应，并且窗口属性是......而不是。

作为替代方案，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}`)
    })
  }
}

对窗口变量做出反应？

1 个答案: