Separating presentational and logic components react/redux

问题

I'm trying to clean up my components so that my container handles logic and my components are presentational only. I'm using Redux to connect my store to container/components.

I'm trying this simple code, and I'm not sure why it is not working and what I'm missing.

Previously I had, and it worked:

var Main = React.createClass({
    render: function(){
       var style = this.props.hover;
       var actions = this.props.actions;
       return (
           <div>
              <Bullet style={style} actions = {actions}/>
           </div>
       );
    }
});

function mapStateToProps(state) {
   return {
      hover: state.hover
   }
}

function mapDispatchToProps(dispatch) {
  return {
     actions: Redux.bindActionCreators(actions, dispatch)
  }
}

var MainConnected = connect(mapStateToProps, mapDispatchToProps)    (Main);


module.exports = MainConnected;

And here was my Bullet component:

var Bullet = React.createClass({
   over: function(){
      this.props.actions.ON();
   },
   out: function(){
      this.props.actions.OFF();
   },
   render: function(){
      var style = this.props.style;
      return(
         <div id="bullet" style = {style} onMouseOver = {this.over} onMouseOut = {this.out}></div>
      );
   }
   });

Now, I tried this:

var Main = React.createClass({
    over: function(){
        console.log('hey');
    },
    out: function(){
        this.props.dispatch(actions.OFF()); 
    },
    render: function(){
        var style = this.props.hover;
        return (
            <div>
                <Bullet id="Git" style={style} onMouseOver = {this.over} onMouseOut = {this.out}/>
            </div>
        );
    }
});

//and Bullet component

var Bullet = React.createClass({
    render: function(){
        var style = this.props.style;
        return(
            <div id="bullet" style = {style} ></div>
        );
    }
});

I removed the over and out logic from the Button but they're not working when called from the Main container. I think I'm misunderstanding how to use this too because the console.log() is not being called.

Thanks for pointing me in the right direction as to how to separate this logic and maybe helping understand how this is used in React. Thanks!

回答1:

oh, got it. This helped: ReactJS: onClick handler not firing when placed on a child component

I had to pass my functions from Parent to Child. So the code looks like this:

var Main = React.createClass({
    over: function(){
        this.props.dispatch(actions.ON());  
    },
    out: function(){
        this.props.dispatch(actions.OFF()); 
    },
    render: function(){
    var style = this.props.hover;
        return (
            <div>
                <Bullet id="Git" style={style} over = {this.over} out = {this.out}/>
            </div>
        );
   }
});

var Bullet = React.createClass({
    render: function(){
        var style = this.props.style;
        var over = this.props.over;
        var out = this.props.out;
        return(
            <div id="bullet" style = {style} onMouseOver = {over} onMouseOut = {out}></div>
        );
    }
});

来源：https://stackoverflow.com/questions/35091875/separating-presentational-and-logic-components-react-redux

标签

javascript

reactjs

components

redux