Razzle: Constructor - calling super and bind

Created on 9 Jun 2016 · 3Comments · Source: jaredpalmer/razzle

Hi @jaredpalmer , started working on a project using your starter-project. Great work!

I have a question about dispatching redux actions on user interactions (e.g. button click). My questions is more about the right syntax. In the past I called the constructor and called the bind function like that:

function mapDispatchToProps(dispatch) {
    return bindActionCreators({
        importedAction,
    }, dispatch);
}
class Calendar extends React.Component {

constructor(props) {
   super(props);
   this.handleClick = this.handleClick.bind(this);
}

handleClick(programId) {
        this.props.importedAction()
        .then((response) => {
            do something with response
        });
    }
 }
....

render() {
 return (
   <a onClick={this.handleClick}>Click me to dispatch action</a>
)
}

I think you have a babel-plugin installed which allows you to avoid writing the "extends React.Component" all the time. I cant see 'bindActionCreators' as well.

Question, how would I write above in the way it could be used in your starter project?

Source

kkarkos

Most helpful comment

Seems like you are not using connect from react-redux:

import { connect } from 'react-redux'

... your component...

export default connect(mapStateToProps, actionCreators)(Calendar)

wedneyyuri on 9 Jun 2016

👍2

All 3 comments

function mapDispatchToProps(dispatch) {
    return bindActionCreators({
        importedAction,
    }, dispatch);
}
class Calendar extends React.Component {

handleClick(programId) {
        this.props.importedAction()
        .then((response) => {
            do something with response
        });
    }
 }
....

render() {
 return (
   <a onClick={(evt) => this.handleClick()}>Click me to dispatch action</a>
)
}

wedneyyuri on 9 Jun 2016

Seems like you are not using connect from react-redux:

import { connect } from 'react-redux'

... your component...

export default connect(mapStateToProps, actionCreators)(Calendar)

wedneyyuri on 9 Jun 2016

👍2

Closing this because it's not related to the boilerplate. However, I suggest watching Dan Abramov's courses on Redux:

Also check out the react-redux API for connect: https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options