javascript - Listening directly to Reflux Actions in Component -

from i've read pattern components pass data actions pass store value changes trigger updates in components subscribe stores. question how "react" these triggered updates in form of notification? ( ie saved notification )

ie add logic render of notification component displays if there flag attribute in object subscribed to? deletes after time. sounds wrong.

update

thanks hannes johansson think have better grasp of pattern. have working following:

1. component passes data through action store

2. the store interacts api , adds flag model component notified of updated model.

   createitem: function (item) {     $.ajax({         url: '/items',          method: 'post',         data: item,         success: function (item) {             currentbrandactions.addcampaign(item);             this.item = item;             item.newlycreated = true;             this.trigger(item);         }.bind(this)     }) } 

3. the component sees flag , renders "notification child component"

   var newlycreated = this.state.item.newlycreated === true; if (newlycreated) {   newlycreated = <itemcreatednotification item={this.state.item} /> } else {   newlycreated = ''; } return (   <form onsubmit={this.createitem} classname="form">     {newlycreated} 

4. something needs move app new place based on event. should a) notification child component b) parent component c) store?

according colin megill's talk on flux api patterns api interaction should occur in action, reflux doesn't allow that.

update 2

1. component passes data action called createitemrequest

2. the action has preemit hook api call. createitemrequest continues store store can change model reflect state of sending displayed in component( maybe show spinner ). action responsible firing 2 other events depending on api result.

   itemactions.createitemrequest.preemit = function (data) {     $.ajax({         url: '/items',          method: 'post',         data: data,         success: function (item) {             itemactions.itemcreatedsuccess(item);         },         error: function (error) {             itemactions.itemcreatederror(error);         }     }); } 

there different approaches this. example, in reflux it's easy listen directly actions if choose to, since each action "dispatcher".

however, general, purist flux principle stores register dispatcher , components listen store updates. , store trigger event notifies something has changed, not providing payload. it's component read store's state , determine how render it.

one approach 1 describe, put flag on items in store signal update has happened, violate flux principle if components update stored items' flags, since stores meant mutate state, , in response actions , not other source. in case "flux thing" trigger yet event signals newly added item has been noted store can reset flag in response action.

another approach can think of diff state in component when gets notified of store update. keep flags in component, or keeping newly added items in separate list in state , render them separately.

there no hard rules here, except if want follow core flux principle, components should never directly mutate stores' state, because should mutated stores in response actions. allows uni-directional data flow , single source of truth data, main goal of flux.