react + redux: Cannot read property 'handleClickMenu' of undefined - reactjs

Question

I'm new to the reagent and Redux. I am trying to make the menu, but the console getting error:
App.js?eb5a:12 Uncaught TypeError: Cannot read property 'handleClickMenu' of undefined
How to fix the error?
As the payload in a new state record?
App.js:
import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import User from '../components/User'
import Page from '../components/Page'
import BottomMenu from '../components/BottomMenu'
import * as pageActions from '../actions/PageActions'
import * as userActions from '../actions/UserActions'
import * as bmenuActions from '../actions/BottomMenuActions'
class App extends Component {
render() {
const { user, page, bottomMenu } = this.props
const { getPhotos } = this.props.pageActions
const { handleClickMenu } = this.props.bmenuActions
const { handleLogin } = this.props.userActions
return <div className='row'>
<Page photos={page.photos} year={page.year} getPhotos={getPhotos} fetching={page.fetching} error={page.error}/>
<User name={user.name} handleLogin={handleLogin} error={user.error} />
<BottomMenu selectedItem={bottomMenu.selectedItem} bmenuClick={() => handleClickMenu} />
</div>
}
}
function mapStateToProps(state) {
return {
user: state.user,
page: state.page,
bottomMenu: state.bottomMenu
}
}
function mapDispatchToProps(dispatch) {
return {
pageActions: bindActionCreators(pageActions, dispatch),
userActions: bindActionCreators(userActions, dispatch),
bmenuActions: bindActionCreators(bmenuActions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(App)
component bottomMenu.js:
import React, { PropTypes, Component } from 'react'
import BottomMenuItem from '../components/BottomMenuItem'
export default class BottomMenu extends Component {
render() {
const { selectedItem, bmenuClick } = this.props;
const menuItems = [{
url: 'home',
name: 'Главная страница'
}, {
url: 'goods',
name: 'Объем поставок'
}, {
url: 'geo',
name: 'География поставок'
}, {
url: 'clients',
name: 'Клиенты и партнеры'
}, {
url: 'production',
name: 'Виды продукции'
}, {
url: 'cost',
name: 'Рассчитайте стоимость'
}, {
url: '',
name: 'Свяжитесь с нами'
}];
return <ul className='footer-menu'>
{ menuItems.map((item,index) => <BottomMenuItem key={index} item={item} selected={index === selectedItem} bmenuClick={bmenuClick} /> )}
</ul>
}
}
BottomMenu.propTypes = {
item: PropTypes.object,
selected: PropTypes.bool
}
component BottomMenuItem.js:
import React, { PropTypes, Component } from 'react'
export default class BottomMenuItem extends Component {
bmenu_Click(e){
e.preventDefault()
this.props.bmenuClick(e)
}
render() {
const { item, selected} = this.props
const className = 'footer-menu__li footer-menu__li--' + item.url + (selected ? ' footer-menu__li--current' : '')
return <li className={className}>
{!selected ?
<a href={item.url} className='footer-menu__href' onClick={::this.bmenu_Click}>{item.name}</a>
:
<span className='footer-menu__href'>{item.name}</span>
}
</li>
}
}
BottomMenuItem.propTypes = {
item: PropTypes.object.isRequired,
selected: PropTypes.bool.isRequired,
bmenuClick: PropTypes.func.isRequired
}
action: BottomMenuAction.js
export function handleClickMenu(el) {
console.log(el)
return function(dispatch) {
dispatch({
type: 'bmenuClick',
payload:''
})
}
}

Answer 1

A few mistakes in your code
First is a typo where you bindAction as bmenuActions and then in your App.js you are using it with the wrong case as const { handleClickMenu } = this.props.bMenuActions. You need to change that to const { handleClickMenu } = this.props.bmenuActions
Also now since here handleClickMenu is a function you need to bind it while passing down to BottomMenu component like
<BottomMenu selectedItem={bmenu.selectedItem} bmenuClick={() => handleClickMenu} />
Now again in App.js your state is available as bottomMenu and you are resolving it like bmenu. Change it to
const { user, page, bottomMenu } = this.props
Now from BottomMenu component you are sending the props as bmenuClick to the BottomMenuItem component like
return <ul className='footer-menu'>
{ menuItems.map((item,index) => <BottomMenuItem key={index} item={item} selected={item === selectedItem} bmenuClick={() => bmenuClick }/> )}
</ul>
but you are using it in your BottomMenuItem component as this.props.handleClickMenu here
bmenu_Click(e){
this.props.handleClickMenu(e)
}
You need to change it as
bmenu_Click(e){
this.props.bmenuClick(e)
}

Answer 2

Thank you, I've done:
<BottomMenuItem key={index} item={item} pos={index} selected={index === selectedItem} bmenuClick={bmenuClick} />
and
<a href={item.url} className='footer-menu__href' onClick={::this.bmenu_Click} data-pos={pos}>{item.name}</a>