ownProps is missing props added through mapStateToProps

Question

I have the following form:

let NoteForm = ({handleSave}) => {
  return (
    <form onSubmit={handleSave}>
      <Field component="input" type="text" name="body" />
      <button type="submit">Submit</button>
    </form>
  )
}

And:

const mapStateToProps = (state, ownProps) => {
  return {
    isNew: state.isNew
  }
}

And finally:

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    handleSave: () => {
      dispatch(saveNote(ownProps)) // ownProps does not contain "isNew" prop
    }
  }
}

The prop isNew is not included in ownProps. I hope it's an obvious mistake I am making here and unable to see it.

The component that renders NoteForm is Note and renders it conditionally as such:

{ (isNew || isEdit) && <NoteForm /> }

I can certainly pass the props in as attributes, but at this point I am stubborn as I am unable to understand why my prop is missing. I have already tried passing it in as an argument to my component as such: {handleSave, isNew} but that doesn't work either.

For reference, my connect is:

NoteForm = connect(
  mapStateToProps,
  mapDispatchToProps
)(NoteForm);

Answer 1

Currently I can't test this, but it makes sense that ownProps are the properties that are passed to the component that is being returned by connect(...)(YourComponent). On the other hand isNew is passed directly to YourComponent by mapStateToProps, so you wouldn't have access to it in the mapDispatchToProps callback.

Somewhere in your app...

const ReturnedComponent = connect(...)(YourComponent)

render () {

  <ReturnedComponent {...ownProps} />
}

These ownProps are accessible by mapStateToProps, but not the ones passed by mapDispatchToProps.

---

See a possible solution to your problem here recommended by the creator of redux himself.