javascript - React 和 Mobx - 在加载时加载 API 数据？

Question

我必须验证用户是否已登录，使用一些 token ，目前在下一个示例中已经设置，用于测试。

我有两个我能想到的选择。

选项 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，因为这会导致不必要的服务器往返以重新验证已验证的 token 。总的来说，MobX 提供了很好的工具来最小化生命周期方法的使用并编写更清晰的代码。