Should view call the store directly?

Question

From the Flux's TodoMVC example, I saw the TodoApp component is asking the store to get the states.

Should the view create the action and let the dispatcher to call the store instead?

Answer 1

The views that are listening for the stores' "change" event are called controller-views, because they have this one controller-like aspect: whenever the stores change, they get data from the stores and pass it to their children through props.

The controller-views are the only views that should be calling the stores' getters. The getters should be the only public API that the stores expose. Stores have no setters.

It's very tempting to call the stores' getters within the render() method of some component deep in the tree, but this is an anti-pattern. It violates the unidirectional data flow, making it more difficult to understand the flow of data through the application, and it and makes your rendering more expensive.

In the TodoMVC Flux example, the TodoApp component is the only controller-view.

Answer 2

You should get the values from stores somehow:

1. Get value directly from store. E.g. postsStore.get('firstPost')

   You'll not be notified on changes. So, don't use this method.

2. Get & Subscribe to store using lifecycle methods on component

   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 & Subscribe to store using mixins. Usually Flux implementations gives you Mixin for it. So value from store setting to component state on changes of value in store.

   example from Reflux

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

4. Subscribe to action. It can be useful for rendering errors, that you don't want to store. But you can use it for whatever you want.

   Implementation same as previous, but instead store use action

Best way to sync with stores is to subscribe to store.

---

So answer to your question is:

Yes, it's ok, and No, you shouldn't call methods on stores in components.

It's ok to call methods on stores if it's pure methods (doesn't change data in store). So you can call only get methods.

But if you want (you should) to be notified on changes in store, you should subscribe to it. As manual subscribing can be added through mixins, it should use it (your own, or from flux-library). So SubscribingMixin(MyStore) calls some methods on store internally, but not you are right in component.

---

But if you think about reinvent Flux, notice, that there is no difference between subscribing to store and subscribing to action. So it's possible to implement it so all data will pass through actions.

Answer 3

View could get the states of Stores directly.

Action + Dispatcher is the flux way to change the states of the Store, not accessing existing Store data.