MobX 商店职责答案

【问题标题】：MobX Store ResponsibilitiesMobX 商店职责
【发布时间】：2018-01-02 17:28:06
【问题描述】：

我最近开始使用 MobX 开展一个项目。我以前从未使用过 MobX，所以我对一件事感到很困惑。

MobX 商店的职责是什么？

1) MobX @action, @computed 是否应该返回 html/jsx？在官方 10 分钟 MobX 教程https://mobx.js.org/getting-started.html 中有一个@computed get report。这只是一个例子吧？

@computed get report() {
    if (this.todos.length === 0)
        return "<none>";
    return `Next todo: "${this.todos[0].task}". ` +
        `Progress: ${this.completedTodosCount}/${this.todos.length}`;
}

2) 在@action 中调用API 是不是一个好主意？像这样？

@action
submitProfileInformation = params => {
  return post("apiendpoint", {
    body: params
  }).then(resp => {
    this.firstName = resp.first_name;
    return "ok";
  });
};

我来自 redux 世界，我对它的看法 store 应该只存储和改变值。动作会对组件做出反应，让他们知道某些事情发生了变化，以便他们重新渲染。对吗？

【问题讨论】：

MobX 与 html/jsx 无关。这是一个普通的 javascript 商店。是的，可以在 @action 中调用 API :) 只需记住您需要将响应绑定到存储范围内的 @observable。

标签： javascript reactjs mobx

【解决方案1】：

它不返回任何 html 或 jsx。这只是一个示例，它只返回字符串。
只有then 部分应标记为操作。

概念是一样的。遵循最佳实践或滥用 mobx 的灵活性并做坏事取决于您。我建议您阅读这篇文章： https://mobx.js.org/best/store.html

【讨论】：

【解决方案2】：

MobX 存储用于存储应用程序状态，包括可观察和不可观察数据。（类似于 Redux Stores，虽然 Redux 没有 observable）

MobX 动作是修改可观察数据的任何函数。没有规定必须采取行动，但这样做是一种很好的做法。

对于您的问题：Actions would react component let know that something has changed so that they would rerender. 答案是肯定的和否定的。动作是修改可观察数据的函数。您的观察者组件对可观察数据的变化做出反应，而不是动作函数。但是由于动作总是修改可观察的数据，所以调用动作函数应该触发观察者组件做出反应。

@computed 装饰器只是创建从其他可观察数据计算而来的可观察数据（类似于 getter 函数）

【讨论】：