应该直接查看商店吗?

时间:2015-04-07 05:22:13

标签: reactjs-flux flux

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

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

3 个答案:

答案 0 :(得分:4)

正在侦听商店“更改”事件的视图称为控制器视图,因为它们具有这样一个类似控制器的方面:每当商店发生变化时,他们从商店获取数据并通过商店将其传递给子女道具。

控制器视图是应该调用商店的getter的唯一视图。 getter应该是商店公开的唯一公共API。商店没有制定者。

在树的深处某些组件的render()方法中调用商店的getter非常诱人,但这是一种反模式。它违反了单向数据流,使得通过应用程序理解数据流变得更加困难,并且使得渲染变得更加昂贵。

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

答案 1 :(得分:2)

你应该以某种方式从商店获得价值:

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

    您不会收到有关更改的通知。所以,不要使用这种方法。

  2. Get&使用组件

    上的生命周期方法订阅商店
    componentWillMount: function(){
        var _this = this;
        myStore.subscribe(function(newValue){
            _this.setState({
                myValue: newValue
            });
        })
    },
    componentWillUnmount: function(){
        // don't forget to unsubscribe from store here
    }
    
  3. Get&使用mixins订阅商店。通常Flux实现为您提供Mixin。因此,商店设置到组件状态的值就是商店中价值的变化。

    来自Reflux的例子

     mixins: Reflux.connect(myStore, 'myValue'),
     render: function(){
         // here you have access to this.state.myValue
     }
    
  4. 订阅行动。它可用于渲染您不想存储的错误。但你可以随心所欲地使用它。

    与之前相同的实现,而是store使用action

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


    所以回答你的问题是:

    ,没关系,,您不应该调用组件中商店的方法。

    如果它是方法(不会更改商店中的数据),可以在商店上调用方法。因此,您只能调用get方法。

    但是如果你想(你应该)在商店中通知更改,你应该订阅它。由于可以通过mixin添加手动订阅,因此它应该使用它(您自己的,或来自flux-library)。所以SubscribingMixin(MyStore)在内部调用了一些方法,但不是你在组件中是正确的。


    但是如果你考虑重新发明Flux,请注意,订阅商店和订阅行动之间没有区别。因此,可以实现它,以便所有数据都能通过操作。

答案 2 :(得分:0)

查看可以直接获得商店的状态。

Action + Dispatcher是改变商店状态的流行方式,而不是访问现有的商店数据。