Redux: Cannot read property 'add' of undefined - redux

Question

I'm hard fighting with Redux, trying to dispatch inputValue to a store. When I'm trying to do this I get Cannot read property 'add' of undefined error.
import React, { useState } from 'react';
import './SearchingBar.css'
import { connect } from 'react-redux'
import actions from '../../duck/actions'
const SearchingBar = ({shareToggleClass, props}) => {
const [toggleClass, setToggleClass] = useState(false);
const [query, setQuery] = useState('');
const search = event => {
if(event.key === "Enter") {
setToggleClass(true);
shareToggleClass({toggleClass})
props.add(query)
}
}
return (
<input type = "text"
placeholder = "Search.."
className = {toggleClass ? "Active" : "unActive"}
onChange = {e => setQuery(e.target.value)}
value = {query}
onKeyPress = {search}
/>
)
}
const mapStateToProps = state => ({
inputValue: state.inputValue
})
const mapDispatchToProps = dispatch => ({
addValue: inputValue => dispatch(actions.addValue(inputValue))
})
export default connect(mapStateToProps, mapDispatchToProps)(SearchingBar);

Answer 1

Pretty sure your component argument destructuring is wrong.
Currently, you have:
const SearchingBar = ({shareToggleClass, props}) => {
However, as written, this assumes that the one-and-only argument for this function, which is an object we normally refer to as props, also has a nested field named props. That's probably not correct.
If you're trying to grab out just the shareToggleClass field, and then access all remaining props field as an object named props, you should use "rest destructuring":
// The ... rest operator grabs all remaining fields, and puts them in a new object
const SearchingBar = ({shareToggleClass, ...props}) => {
Alternately, you could just destructure any remaining fields specifically that you need:
const SearchingBar = ({shareToggleClass, add}) => {
The other issue is that you likely don't have a props.add function anyway, because your mapDispatch is configured to create a prop named addValue:
const mapDispatchToProps = dispatch => ({
addValue: inputValue => dispatch(actions.addValue(inputValue))
})
Also got a couple suggestions on the React-Redux usage.
If you are going to use connect, we recommend using the "object shorthand" form of mapDispatch instead of writing it as a function:
const mapDispatch = {
addValue: actions.addValue
}
connect(mapState, mapDispatch)(MyComponent)
// or even just pass the `actions` object directly
connect(mapState, actions)(MyComponent)
But, we specifically recommend using the React-Redux hooks API as the default instead of connect:
const SearchingBar = () => {
const inputValue = useSelector(state => state.inputValue);
const dispatch = useDispatch()
const [toggleClass, setToggleClass] = useState(false);
const [query, setQuery] = useState('');
const search = event => {
if(event.key === "Enter") {
setToggleClass(true);
shareToggleClass({toggleClass})
dispatch(addValue(query))
}
}
return (
<input type = "text"
placeholder = "Search.."
className = {toggleClass ? "Active" : "unActive"}
onChange = {e => setQuery(e.target.value)}
value = {query}
onKeyPress = {search}
/>
)
}