为 ReactJS 组件和 MobX 正确获取数据

Question

在 MobX 中获取（和发布）数据的首选方式是什么？包括在外部数据调用的 onLoad 期间制作微调器的选项。

全部在商店中使用@actions，使组件尽可能愚蠢，例如以尽可能多的无状态功能组件为目标。
在组件中，例如通过使用 ComponentDidMount 或 WillMount
通过使用高阶组件

Answer 1

根据 mobx documentation，动作应该在 mobx 动作中完成，因此在您描述的第一个选项所建议的商店中。

他们提供的示例完全符合您的用例：

@action    createRandomContact() {
    this.pendingRequestCount++;
    superagent
        .get('https://randomuser.me/api/')
        .set('Accept', 'application/json')
        .end(action("createRandomContact-callback", (error, results) => {
            // ^ Note: asynchronous callbacks are separate actions!
            if (error)
                console.error(error);
            else {
                const data = JSON.parse(results.text).results[0];
                const contact = new Contact(this, data.dob, data.name, data.login.username, data.picture)
                contact.addTag('random-user');
                this.contacts.push(contact);
                this.pendingRequestCount--;
            }
        }));
}

为 ReactJS 组件和 MobX 正确获取数据

Proper data fetching for ReactJS components and MobX

reactjs

mobx