反应和移动负载API数据的负载？

Question

我必须使用一些标记来验证用户是否已登录，目前在下一个示例中已经设置了这个标记，以便进行测试。

我有两种选择。

选项1

在商店的构造函数上这样做：

export class MyStore {

    @observable token = "sometoken";
    @observable authenticated = false;

    constructor() {
        this.checkAuth();
    }

    @action
    checkAuth() {
        fetch("http://localhost:3001/validate/" + this.token)
            .then(res => res.json())
            .then(data => {
                this.authenticated = data.validated;
            });
            // catch etc
    }
}

备选方案2:

在我使用数据的组件中执行，componentDidMount方法。

这两种方法都是可行的，但是处理这种状态的最佳实践是什么呢？

Answer 1

我肯定会选择第一种选择。如果您不总是需要身份验证--例如，某些部分是公共的--那么就不要在存储构造函数中调用this.checkAuth()。如果所有部分都需要身份验证，那么它看起来就像这样。应该避免选项2，因为这将导致不必要的往返到服务器，以重新验证已经验证的令牌。一般来说，MobX提供了很好的工具，可以最大限度地减少生命周期方法的使用，并编写更干净的代码。