REDUX-REACT - dispatch undefined - reactjs

Question

Dispatch in component is UNDEFINED and dispatch in mapDispatchToProps is ok
Action and reducers is ok - 100%;
I want transfer to dispatch in action to create request and run action from action
My component:
import React, { Component, Fragment } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import styled from 'styled-components';
import { carAction, fetchDogAction } from '../../../actions/CarAction';
class CarListContainer extends Component {
render () {
const { cars, carAction, dispatch, dog } = this.props;
console.log(dispatch) // THIS UNDEFINED!!!!
return(
<Fragment>
<Title onClick={() => {
fetchDogAction(dispatch)
}}>HEllo</Title>
{cars.map((elem) =>
<Title onClick={() => {carAction (elem)}} key={elem.id}>{elem.mark}</Title>
)}
{dog ? <img src={dog.message} /> : null }
</Fragment>
)
}
}
const Title = styled('h2')`
color: red;
font-size: 30px;
`;
function mapStateToProps (state) {
return {
cars: state.cars,
dog: state.dog
}
}
function mapDispatchToProps(dispatch) {
console.log(dispatch) //THIS DISPATCH IS OK
return bindActionCreators ({
carAction: carAction,
fetchDogAction: fetchDogAction
}, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(CarListContainer);

Answer 1

Your error comes from having bindActionCreators() inside mapDispatchToProps() which is not recommended practice, since mapDispatchToProps uses bindActionCreators internally.
bindActionCreators and mapDispatchToProps - Do I need them?
You can try using an arrow function and dispatching actions directly in the mapDispatchToProps method.
import * ACTIONS from './actions'
function mapDispatchToProps(dispatch) {
return {
carAction: (elem) => dispatch(ACTIONS.fetchCarAction(elem)) ,
dogAction: () => dispatch(ACTIONS.fetchDogAction())
}
}
//action creators import them into your component
export const fetchCarAction = (elem) => {
return {
type: ACTION_TYPES.CARACTION,
payload: elem
}
}
export const fetchDogAction = () => {
return {
type: ACTION_TYPES.DOGACTION,
}
}
//render method
<Title onClick={() => this.props.dogAction() }>HEllo</Title>
{cars.map((elem) =>
<Title onClick={() => this.props.carAction(elem) } key={elem.id}>{elem.mark}
</Title>
)}
So in your render you will call the name of the property in mapDispatchToProps and not the name of the action creator, I kept the name of the action creators and name of the properties different so you can see this.
If you want a fully functioning react-redux app you can check out this starter project I built, I got good feedback on it.
https://github.com/iqbal125/modern-react-app-sample