Mapdispatchtoprops Alternative Definition

Pass following mapDispatchToProps function as second parament to connect function

  • connect function will invoke mapDispatchToProps by passing it the dispatch funtion as parameter
  • return value of function is an object that defines a group of function that get passed to the connected components as props
const NewNote = (props) => {
  // ...
}
const mapDispatchToProps = dispatch => {
  return {
    createNote: value => {
      dispatch(createNote(value))
    },
  }
}
export default connect(
  null,
  mapDispatchToProps
)(NewNote)
  • createNote prop is defined as following function that gets passed, which dispatches the action created with createNote action creator
    value => {
      dispatch(createNote(value))
    }
  • component references the function through its props by calling props.createNote
const NewNote = (props) => {
  const addNote = (event) => {
    event.preventDefault()
    const content = event.target.note.value
    event.target.note.value = ''
    props.createNote(content)
  }
  return (
    <form onSubmit={addNote}>
      <input name="note" />
      <button type="submit">add</button>
    </form>
  )
}

Note: This is a complicated definition not commonly used but necessary when the dispatched actions need to reference the props of the component.