从Flux的TodoMVC示例中,我看到TodoApp组件要求商店获取状态。
视图是否应该创建操作并让调度程序改为调用商店?
答案 0 :(得分:4)
正在侦听商店“更改”事件的视图称为控制器视图,因为它们具有这样一个类似控制器的方面:每当商店发生变化时,他们从商店获取数据并通过商店将其传递给子女道具。
控制器视图是应该调用商店的getter的唯一视图。 getter应该是商店公开的唯一公共API。商店没有制定者。
在树的深处某些组件的render()
方法中调用商店的getter非常诱人,但这是一种反模式。它违反了单向数据流,使得通过应用程序理解数据流变得更加困难,并且使得渲染变得更加昂贵。
在TodoMVC Flux示例中,TodoApp组件是唯一的控制器视图。
答案 1 :(得分:2)
你应该以某种方式从商店获得价值:
直接从商店获取价值。例如。 postsStore.get('firstPost')
您不会收到有关更改的通知。所以,不要使用这种方法。
Get&使用组件
上的生命周期方法订阅商店componentWillMount: function(){
var _this = this;
myStore.subscribe(function(newValue){
_this.setState({
myValue: newValue
});
})
},
componentWillUnmount: function(){
// don't forget to unsubscribe from store here
}
Get&使用mixins订阅商店。通常Flux实现为您提供Mixin。因此,商店设置到组件状态的值就是商店中价值的变化。
来自Reflux的例子 mixins: Reflux.connect(myStore, 'myValue'),
render: function(){
// here you have access to this.state.myValue
}
订阅行动。它可用于渲染您不想存储的错误。但你可以随心所欲地使用它。
与之前相同的实现,而是store
使用action
与商店同步的最佳方式是订阅商店。
是,没关系,否,您不应该调用组件中商店的方法。
如果它是纯方法(不会更改商店中的数据),可以在商店上调用方法。因此,您只能调用get
方法。
但是如果你想(你应该)在商店中通知更改,你应该订阅它。由于可以通过mixin添加手动订阅,因此它应该使用它(您自己的,或来自flux-library)。所以SubscribingMixin(MyStore)
在内部调用了一些方法,但不是你在组件中是正确的。
但是如果你考虑重新发明Flux,请注意,订阅商店和订阅行动之间没有区别。因此,可以实现它,以便所有数据都能通过操作。
答案 2 :(得分:0)
查看可以直接获得商店的状态。
Action + Dispatcher是改变商店状态的流行方式,而不是访问现有的商店数据。