app.js
import * as types from '../constants/ActionTypes'
export const openSidebar = () => ({ type: types.OPENSIDEBAR })
header.js
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import * as appActions from '$redux/actions/app'
import { bindActionCreators } from 'redux'
import 'assets/sass/header'
const mapDispatchToProps = dispatch => ({
actions: bindActionCreators(appActions, dispatch)
})
class Header extends Component {
static defaultProps = {
title: '电影'
}
static propTypes = {
title: PropTypes.string,
actions: PropTypes.object
}
componentDidMount () {
}
openSideBar = () => {
console.log(this.props.actions)
// {openSidebar: f}
this.props.actions.openSideBar()
// this.props.actions.openSideBar is not a function
// 请问这里用dispatch怎么触发mapDispatchToProps的actions咧??
}
render () {
const { title } = this.props
return (
<nav id='header' data-flex='cross:center main:justify box:justify'>
<a className='go-menu' onClick={this.openSideBar} href='javascript:;'><i className='iconfont icon-menu' /></a>
<div className='title' data-flex='cross:center main:justify'>
<p>{title}</p>
</div>
<div data-flex='cross:center'>
<a className='go-city'>广州<i className='iconfont icon-dropdown' /></a>
<a className='go-mine'><i className='iconfont icon-people' /></a>
</div>
</nav>
)
}
}
export default connect(
undefined,
mapDispatchToProps
)(Header)
用法是没错的,我觉得报错应该是因为你把
this.props.actions.openSidebar()
写成
this.props.actions.openSideBar()
了吧