reactjs - Action not being called - flux react -

builder action positionrcomponent not called. doing wrong? check out commentline inside movebox function in buildview.js

expecting output: printed in console.

position r component

below code snippets of buildview.js , builder-actions.js.

buildview.js

import react, {proptypes} 'react'; import builderstore '../stores/builder-store'; import builderactions '../actions/builder-actions' import update 'react/lib/update'; import itemtypes './itemtypes'; import rcomponent './rcomponent'; import { droptarget } 'react-dnd'; import html5backend 'react-dnd-html5-backend';  function getviewrcomponents(){   return( {components: builderstore.getviewrcomponents()}) } const rcomponenttarget = {   drop(props, monitor, component) {     const item = monitor.getitem();     const delta = monitor.getdifferencefrominitialoffset();     const left = math.round(item.left + delta.x);     const top = math.round(item.top + delta.y);     component.movebox(item.id, left, top);   } };  const wrapper = {   border: '1px solid grey' }  function collect(connect, monitor){   return ({     connectdroptarget: connect.droptarget()   }) }  class buildview extends react.component{   constructor(props){     super(props);     this.state = getviewrcomponents();     this._onchange = this._onchange.bind(this);   }   movebox(id, left, top) {      this.setstate(update(this.state, {       components: {         [id]: {           $merge: {             left: left,             top: top           }         }       }     }));     //calling here>>> not getting called     builderactions.positionrcomponent.bind(null, this.state.components[id]);    }   componentwillmount(){     builderstore.addchangelistener(this._onchange)   }   render(){     const { hidecomponentondrag, connectdroptarget } = this.props;      let components = this.state.components.map( (component, index) => {       return(<rcomponent         key={index}         id={index}         left={component.left}         top={component.top}         hidecomponentondrag={hidecomponentondrag}>         {component.name}       </rcomponent>);     })     return connectdroptarget(       <div>         {components}       </div>      );   }   _onchange(){     this.setstate(getviewrcomponents());   }   componentwillunmount(){     builderstore.removechangelistener(this._onchange())   } } buildview.proptypes = {   hidecomponentondrag: proptypes.bool.isrequired,   connectdroptarget: proptypes.func.isrequired };  export default droptarget(itemtypes.rcomponent,rcomponenttarget, collect )(buildview); 

builder-actions.js

import builderconstants '../constants/builder-constants'; import {dispatch, register} '../dispatchers/builder-dispatcher';  export default {   addrcomponent(component) {     console.log("add r component")     dispatch({       actiontype: builderconstants.add_rcomponent, component     })   },   removercomponent(component){     dispatch({       actiontype: builderconstants.remove_rcomponent, component     })   },   positionrcomponent(component){     console.log("position r component");     dispatch({       actiontype: builderconstants.position_rcomponent, component     })   } } 

use call or execute returned function bind:

var f = builderactions.positionrcomponent.bind(null, this.state.components[id]) f() 

or:

builderactions.positionrcomponent.call(null, this.state.components[id]); 

the difference bind doesn't execute returns new function argument list passed new function.

call bind executes, apply similar takes array of arguments.

hope helps.