Action Creators Undefined - react-redux

Question

I'm new to redux, and I'm trying to update my app's state by dispatching the action creator function fetching() in my container file. When I try running my app, I get a "Cannot read property 'fetching' of undefined" error. Why is that?
//popular reducer
const FETCHING = 'FETCHING'
export function fetching() {
return {
type: FETCHING,
}
}
const initialState = {
isFetching: false,
}
export default function popular(state = initialState, action) {
switch (action.type) {
case FETCHING:
return {
isFetching: true,
}
default:
return state
}
}
//Popular Container
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as popularActionCreators from 'redux/popular'
import PropTypes from 'prop-types'
class PopularContainer extends React.Component {
handleFetch() {
this.props.fetching() //Cannot read property 'fetching' of undefined
}
}
PopularContainer.propTypes = {
isFetching: PropTypes.bool.isRequired,
fetching: PropTypes.func.isRequired,
}
function mapStateToProps(state) {
return {
isFetching: state.isFetching
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(popularActionCreators, dispatch)
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(PopularContainer)

Answer 1

According to the error, it's not the action creator that's undefined, but this.props.
You didn't show where handleFetch() is called, but most likely you need to bind it to the class instance.
https://reactjs.org/docs/handling-events.html
class PopularContainer extends React.Component {
constructor(props) {
super(props);
this.handleFetch = this.handleFetch.bind(this);
}
handleFetch() {
this.props.fetching()
}
render() {
// Your render method here
}
}