【问题标题】:Can RefluxJS stores indicate which property has changed when they call trigger()?RefluxJS 商店可以在调用 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) 会更新标题组件,但也会导致待办事项组件尝试使用标题字符串作为其状态,因此我们需要一种方法来指示哪些数据已更改。这两个属性(titlelist)是否应该分到不同的商店?或者,所有对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 调用?

【问题讨论】:

    标签: javascript reactjs reactjs-flux flux refluxjs


    【解决方案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。
    猜你喜欢
    • 2016-01-02
    • 2015-08-30
    • 1970-01-01
    • 2011-11-14
    • 1970-01-01
    • 2011-12-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多