问题标签 [mobx]

我正在为 MobX 看这个小提琴，我也看到了这两种在 ES6 其他地方定义 React 组件的方法，比如 Dan Abramov 的 egghead redux 视频系列。

我的问题是，什么时候适合使用每种类型？

似乎更简单的组件能够使用更简单的语法，但我希望遵循规则或指南。

谢谢！

编辑：我最终选择了 Mobx.js，详情请参阅@mweststrate 答案。

所有关于 redux 的学习资源都展示了如何将它与普通对象模型一起使用。但是当你使用一些 es6 Class 模型时，我无法弄清楚如何使用它。

例如，让我们采用这种状态形状：

而这个类（未测试）

想象一下，我在 WorldCollection 中有 100 个玩家的集合。什么是最好的方法？

采取1：将所有属性从实例复制到状态树

这可以通过注入dispatch构造函数来完成

在每个 setter 中调度一个动作。

并将所有逻辑放在 reducer 中（setter 逻辑是确定性和原子性的）。

临：

• 恕我直言，在我看来，只有一个地方是所有状态的地方。

缺点：

• 所有逻辑都从模型中分散到另一个地方。我不喜欢增加文件。但也许这不是一个真正的问题？
• Redux 说逻辑必须放在 action 中，而不是 reducer 中。
• 该状态需要两倍的内存。我看到immutables.js可以对此进行优化，但我不确定。

采取 2：在 redux 状态树中只存储 id

这可以通过使用dispatchin eachsetter并在每个 setter 之后调度一个动作来完成

当新的树状态改变时。我调用mapStateToProps并WorldCollection.getPlayer()检索正确的实例并将其属性映射到视图。

优点：

• 尊重 Redux 方式，不将逻辑放入 reducer
• 不是“重复状态”（如果 Immutables.js 无法优化）
• 逻辑在模型中（对我来说更有意义）

缺点：

• Redux 状态不代表整个状态

我希望我没有把这个案子简化太多。我的意思是澄清 redux 是否/如何与某些类模型一起使用。

采取 3：使用 Mobx.js 代替/与 Redux

---这里非常预实验---

一周前我发现了 Mobx.js，它的简单性/性能吸引了我。

我认为我们可以观察每个班级成员（共同构成应用程序状态）

在其他地方有一个构建状态树的类，也许 Redux 在这里有意义？（注意我不知道如何做这部分。必须在 Mobx 中更深入地挖掘）

对于我的情况，这是纯粹的 redux/mobx 比较中的优点/缺点。

优点：

• 不那么冗长
• 没有要继承的模型（如在 redux-orm 中）
• 性能已经过评估（所以我几乎不知道我要去哪里）
• 不要在类模型中编写“自以为是”的 reducer（只是 mutators）

缺点：

• 不知道如何实现重做/撤消（或游戏开发中的抖动缓冲区）
• 眨眼间拥有整个状态似乎不像 redux 中的“树”（对我来说这是 redux 的杀手级功能）

来源在这里的develop分支。

在这个简单的应用程序中，我使用autorunAsync去抖动searchText更新并相应地获取 Giphy API。一切正常，直到我想在处理请求时在输入旁边显示一个简单的加载器。

取消注释该行最终会导致动作被无限触发。

我认为只有在修改了目标 observableautorun时autorunAsync才会触发该操作。（searchText在我的情况下）

如何在同一个操作中结合副作用（如 API 获取）和状态更新？我试过transaction了，但我也不能让它工作。我需要更多的时间来理解 MobX 的概念，我确信这是一个愚蠢的错误。:)

任何帮助表示赞赏

让我们在一个带有 React 和 React Router 的应用程序中学习这样的课程。

让我们采取这样的状态

Module1 组件的加载方式如下：

如何将道具传递module1.bars给 Module1 组件？在 redux 中我会使用<provider>，redux-connect但在 Mobx.js 中我有点迷失了。

我试图了解如何将可观察数组与 Mobx 一起使用。

我很难弄清楚为什么会这样：

写道：

而不是经典数组？

在一个 React 项目中，我正在使用 MobX 库。它允许你做的一件事是编写你的代码，就像你正在使用原语一样，但在幕后 MobX 正在做一些可观察到的魔法。我也在这个项目中使用 Flow，并且很难找出正确的语法来应用于 MobX 可观察数组，这些数组至少有两个额外的方法，replace 和 peek。

这段代码的 TS 文件非常深入，我对打字还很陌生。TS 文件可以在这里找到：

https://github.com/mobxjs/mobx/blob/master/src/types/observablearray.ts

我在 Flow 中尝试过的所有语法都不起作用，它可能都很幼稚/无知。

或者

大多数时候我收到这个错误“预期的多态类型而不是类型'MobxArray'。” 当我尝试为组件声明道具时出现此错误：

在应用程序初始化期间补充商店的最佳方法是什么，特别是商店之间的引用？

例如，假设我有 2 个 api 调用：

/todos -> return array of todos [{id: 1, person_id: 2}]

/persons -> return array of Persons [{id: 2, name: 'John'}, {id: 3, name: 'Sam'}]

Todo 对象看起来像这样

class Todo { ... @observable person; ... }

一些 Todos 会有一个 Person 的引用，但不是全部，也不是所有的 Persons 都会被引用，所以它不像只是废弃 Persons api 调用并使用 Todos api 返回 Person 引用那么简单称呼。

但是，我们不能确定是否会首先返回 Persons api 调用，因此我们不能只假设在 todos 响应到达时链接 Todo / Person 引用（希望并行运行调用）...

是否只是客户端代码中的额外逻辑问题，以确保我们在数据进入时设置所有引用？或者有没有人从那里的经验中找到了一些更好的做法。

编辑

我想得越多，我认为最可预测的逻辑是始终获取或创建引用对象。

所以在上面的例子中，如果 Todos 响应首先出现，我们将查找 ID 为 2 的 Person 对象，如果它存在，则创建它并引用该对象。然后，当人员响应进来时，它会做同样的事情......寻找 id 为 2 的人员，如果存在，则使用新数据更新它，如果不存在，则创建它。

有人有更好的想法吗？

我正在尝试让 Mobx 的自动运行正常工作。

我的用例是我有一个模型，我喜欢在它更改时对其进行序列化（或脱水）并将该信息添加到另一个模型的数据中。这给我带来了模型状态的基本时间旅行。两者都是可观察的。

编辑：模型分离的想法是一个是应用程序的数据模型，另一个应该是完全独立的库，我可以从应用程序中使用。我需要定期跟踪应用程序中的更改，但在同一页面上显示状态工具的 UI。

现在，自动运行似乎对我实际跟踪的内容做出了自己的推断。当我在观察模型的实例化中移动模型实例时，发生更改时不再调用自动运行。在模块顶层创建模型实例时，它按我的预期工作。这是我只更改了观察模型的一个属性（每次自动运行调用都会更改的属性）的时候。当我尝试在观察模型中一次更改两件事时，现在也为这些更改调用了自动运行，从而导致了一个无休止的循环（Mobx 捕捉到了这一点）。

我想知道如何更明确地表达我正在使用自动运行功能跟踪的内容，或者是否有其他方法可以跟踪模型更改并在发生任何事情时更新其他模型。

使用代码示例进行编辑。

这就是我所做的（大大简化了）：

这会产生循环依赖，因为原始数据模型更改和结果存储更改都会调用 autorun ，而我只对跟踪对前者的更改感兴趣。

编辑工作结果：

根据@mweststrate 的回答，将 asFlat 与 store 的 states 变量一起使用并从 autorun 中删除日志记录打破了问题循环。

我正在尝试弄清楚如何构建我的应用程序，例如，我有一个模型 User、一个通用 UserStore 来跟踪到目前为止所有用户的加载情况以及一些与 UI 相关的商店，例如 FriendList、PendingFriendList、BlockedUserList、LikedUserList 等，例如那：

我的问题是：这是要走的路吗？或者，还有更好的方法 ？？

在这个类中，我使用初始化的 bool 状态来产生 Mobx.autorun 执行。否则 'this' 没有被完全赋值并导致错误。是否有另一种/更清洁的方法来做到这一点？

这是我在另一个文件中观察到的：