视图应该直接打电话给商店吗？

Posted 2023-02-22

【中文标题】视图应该直接打电话给商店吗？

【英文标题】：Should view call the store directly?

【发布时间】：2015-06-11 14:54:20

【问题描述】：

从 Flux 的 TodoMVC 示例中，我看到 TodoApp 组件要求商店获取状态。

视图是否应该创建操作并让调度程序调用商店？

【参考方案1】：

监听 store 的“change”事件的视图被称为控制器视图，因为它们有一个类似于控制器的方面：每当 store 发生变化时，它们从 store 中获取数据并通过道具。

控制器视图是唯一应该调用 store 的 getter 的视图。 getter 应该是商店公开的唯一公共 API。商店没有二传手。

在树中某个组件的render() 方法中调用商店的getter 非常诱人，但这是一种反模式。它违反了单向数据流，使得更难理解通过应用程序的数据流，并且使您的渲染成本更高。

在 TodoMVC Flux 示例中，TodoApp 组件是唯一的控制器视图。

【讨论】：

我会将此作为答案，因为我想知道最初的想法是怎样的。

【参考方案2】：

您应该以某种方式从商店获取值：

直接从商店获取价值。例如。 postsStore.get('firstPost')

您不会收到更改通知。所以，不要使用这种方法。

使用组件上的生命周期方法获取和订阅商店

componentWillMount: function()
    var _this = this;
    myStore.subscribe(function(newValue)
        _this.setState(
            myValue: newValue
        );
    )
,
componentWillUnmount: function()
    // don't forget to unsubscribe from store here

使用 mixins 获取和订阅存储。通常 Flux 实现会为你提供 Mixin。因此，从存储设置到组件状态的值取决于存储中值的变化。

Reflux 的例子

 mixins: Reflux.connect(myStore, 'myValue'),
 render: function()
     // here you have access to this.state.myValue
 

订阅操作。它对于呈现您不想存储的错误很有用。但你可以随心所欲地使用它。

实现与之前相同，但 store 使用 action

与商店同步的最佳方式是订阅商店。

---

所以你的问题的答案是：

是的，没关系，否，您不应该在组件中的商店上调用方法。

如果是纯方法（不会更改存储中的数据），则可以调用存储上的方法。所以你只能调用get 方法。

但是，如果您希望（您应该）通知商店的更改，您应该订阅它。由于可以通过 mixins 添加手动订阅，因此应该使用它（您自己的，或来自通量库）。所以SubscribingMixin(MyStore) 在内部调用了一些存储方法，但不是你在组件中是对的。

---

但是，如果您考虑重新发明 Flux，请注意，订阅 store 和订阅 action 之间没有区别。因此可以实现它，以便所有数据都通过操作。

【讨论】：

订阅商店和订阅action有很大的区别。订阅商店是一个简单、理智、单向的数据流。订阅操作是发布-订阅意大利面条代码的秘诀。调度程序是你的朋友，它是 Flux 模式的一部分有充分的理由，因为它清理了很多杂乱的代码。小应用程序的好处并不明显，但随着应用程序的发展，模式的简单性和简洁性真正开始显现出来。

@fisherwebdev 我的意思是编程上没有区别。我认为订阅操作没有任何问题。它不会盲目跟随 FLUX 大炮。但如果你知道自己在做什么，有时最好忽略 FLUX 最重要的规则。我建议阅读smellegantcode.wordpress.com/2015/03/20/… FLUX 只是一组想法。好主意，但如果您更改一些更符合您需求的东西，这并不一定意味着不好。

【参考方案3】：

View可以直接获取Stores的状态。

Action + Dispatcher 是改变 Store 状态的流动方式，而不是访问现有的 Store 数据。