RefluxJS 商店可以在调用 trigger() 时指示哪些属性已更改？

Posted 2023-02-22

【中文标题】RefluxJS 商店可以在调用 trigger() 时指示哪些属性已更改？

【英文标题】：Can RefluxJS stores indicate which property has changed when they call trigger()?

【发布时间】：2015-05-16 21:00:44

【问题描述】：

我是 Flux 整体的新手，但我正试图从 Reflux 开始掌握它，这似乎更固执己见且更易于学习。

据我了解，Reflux 商店有一个trigger 方法，表示商店的数据已更改，并且他们将更新的数据传递给它。然后可以使用 Reflux.connect mixin 或类似方法将此数据设置为 React 组件的状态（或状态属性之一）。

但是如果一个商店有多组数据需要单独收听呢？假设我正在修改 TodoMVC RefluxJS example，并且我希望 TodoStore 也包含一个 @ 987654324@ 属性表示待办事项列表的名称（以及list，待办事项列表）。假设还有一个 <Title> 组件正在侦听对 title 属性的更改，并将 title 设置为其状态。

调用this.trigger(title) 会更新标题组件，但也会导致待办事项组件尝试使用标题字符串作为其状态，因此我们需要一种方法来指示哪些数据已更改。这两个属性（title 和list）是否应该分到不同的商店？或者，所有对trigger 的调用都应该包含一个指示属性的字符串：this.trigger("title", this.title) 或this.trigger("todos", this.list)。还是应该将所有数据组合成一个对象，然后由侦听器选择（例如使用Reflux.connectFilter）？

this.trigger("todos", 
    todos: this.list,
    title: this.title
);

最后两个示例将新数据引入this.trigger() 调用，这意味着Reflux.connect 不能再使用，因为connect 获取从存储返回的数据并直接将组件状态设置为它。这是否意味着我们必须使用Reflux.listenTo(TodoStore,"onTodoChange")，然后过滤掉与该组件无关的trigger 调用？

【参考方案1】：

(1) 其非常重要的是将广播数据更改事件存储到订阅的***视图组件。（所谓的控制器视图，如http://facebook.github.io/flux/docs/overview.html 中所述）。

(2) 可复用的组件，如List、Title等。是自我完成的，这些组件不应该了解存储数据结构。使用属性而不是 setState 来显示数据。

(3) 你真的希望 store 保存不同类型的数据，还是数据属于不同的 store。

(4) 如果存储必须保存不同类型的数据，我的偏好是不按操作类型“过滤”。为简单起见，更新所有监听商店的视图组件。

【讨论】：

更新它们都很好，但我的问题是如何使用 Reflux 来做到这一点。我是否使用Reflux.connectFilter 挑选出相关的状态数据（如我的第二个示例）

是的，绝对可以使用 Reflux.connectFilter，或者可以在商店中实现自定义 getter/filter。