Are component refs accessible in mapDispatchToProps? - node.js

Question

I have a simple React component that has two inputs and dispatches an action to add an item to a catalog using the input values.
# components/addProduct.jsx
import React from 'react'
import { connect } from 'react-redux'
const AddProduct = ({
onClick
}) => {
let title, price
return (
<form
onSubmit= { (e) => {
e.preventDefault()
}}
>
Title: <input ref={ node => {title = node;}} type="text"/><br />
Price: <input ref={ node => {price = node;}} type="text"/><br />
<button onClick={onClick}>Create New Product</button>
</form>
)
}
function mapDispatchToProps(dispatch) {
return {
onClick: () => {
console.log("Firing on click for button")
console.log(this) # => mapToPropsProxy
console.log(AddProduct.refs) # => undefined
dispatch({ # This will be a call to addProduct(title, price) later
type: "ADD_PRODUCT",
title: this.refs.title.value, # ???
price: this.refs.price.value
})
}
}
}
export default connect(null, mapDispatchToProps)(AddProduct)
I can't access the refs I declared in my AddProduct component. This makes intuitive sense; AddProduct doesn't really even exist until connect resolves the first time with mapDispatchToProps and it gets exported.
So how can I access the input values? Am I architecting this incorrectly?

Answer 1

I think you are architecting this incorrectly, your function will get dispatch injected into it, so the vars you need to pass are not part of the context were it this declared, you should do something like:
<button onClick={() => {this.props.onClick(this.refs.title.value, this.refs.price.value) }}>Create New Product</button>
and the connect:
function mapDispatchToProps(dispatch) {
return {
onClick: (title, value) => {
dispatch({ # This will be a call to addProduct(title, price) later
type: "ADD_PRODUCT",
title,
price
})
}
}
}

Answer 2

Generally refs are only used when you need to access the DOM for some special reason. Use props and events. Something like:
<input value={title} onChange={({target:{value}}) => onTitleChanged(value)}/>
// snip
const mapDispatchToProps = dispatch => ({
onTitleChanged: newTitle => dispatch({type: 'SOME_ACTION', value: newTitle})
})