React Notes

Examples.js

// Don't use fat arrow functions as props in pure components, use a named function instead e.g.
export const ChoiceKey = (props: Props) => {
  const keyClickHandler = () => {
    props.keyClick(props.id)
  }

  return <div className={classes.choiceKey}
    onClick={keyClickHandler}>Choice Key {props.id}</div>
}

// mapActionCreators for redux connect() ...
export default connect(mapStateToProps, mapActionCreators)(ChoiceAsTest)

// ... can be an object ...
const mapActionCreators = {
  run: () => actions.creators.runRequest(1000000)
}

// ... or a function that returns an object i.e. where the react component needs to pass arguments to the function
const mapActionCreators = (dispatch) => ({
  keyClick: bindActionCreators(actions.creators.keyClick, dispatch)
})