MobX 存储职责

Question

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

MobX 存储职责是什么？

1) MobX应该@action, @computed return 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 应该只存储和改变值。动作会对组件做出反应，让组件知道某些内容已更改，以便它们重新呈现。对吗？

Answer 1

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

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

Answer 2

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

MobX 操作是修改可观察数据的任何函数。没有规则说你必须把行动放在商店里，但这样做是很好的做法。

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

@computed 装饰器简单地创建从其他可观察数据计算的可观察数据（类似于 getter 函数）

MobX 存储职责

MobX Store Responsibilities

javascript

reactjs

mobx