Setting a flag in component state directly without getting into a full Flux cycle

Question

I started with FLUX very recently, and need some advise on how should I update the component state and the store.

I need to set a toggle flag which is bonded to an onclick event, from what I understand in Flux architecture, I should call an action then trigger a dispatch event and then the store will update and emit update resulting my component to receive the update and re-render. (Please correct me if I'm wrong here) Component Code look like this:

...
_updateState:function(){
    this.setState({myTrigger: MyStore.myTrigger});
},
_onClickEvent: function(boolValue){
    MyActions.updateTrigger(boolValue);
},
...
render: function(){
  return: (
  ...<div onClick={this._onClickEvent}/>...
  )
}
...

I wonder why shouldn't I just call setState directly which would trigger the re-render directly and avoid going through the full flux cycle which I don't really need since I will always pass in "true" for this function, which really is the same as not passing any data over to the store. Code will look like this:

...
_onClickEvent: function(){
    this.setState({myTrigger: true});
}
...

Seemly to me this is by-passing the flux single directly process flow concept and creating a component event loop within the component. Is this wrong to do? Can anyone help me understand the reasoning behind why this is a good or bad practice to do so?

Thank you very much! DD

score 0 · Accepted Answer · answered Mar 06 '15 at 08:47

This is not wrong. The Flux data flow is intended to handle data which are either persisted or shared between components. If the data is only used in this component and there is no persisting of the data, the last example you show is the correct way. There is no need to overcomplicate things, that is not why Flux is there.

Flux gives you the uni-directional data flow architecture. This means that if your application wants to share or store data, then you want to use the Flux architecture. This way you can fetch or post data and then notify your components when the new data has arrived.

An example would be in a message system. You want to fetch a message. First you trigger an action with MyAction.fetchMessage(message); Then you do a get request to whatever application that stores your messages. When that returns you send the data to your MessageStorewhere you cache your data. After that you trigger an event from the store which tells the components that the new message has arrived. From there on the components just fetched the new message from the store and re-render.

That is when the Flux architecture is brilliant. It is easy to see the data flow through your system, which makes it easier to debug and easier to keep data separated from the components.

Setting a flag in component state directly without getting into a full Flux cycle

1 Answers1