redux中bindActionCreators如何dispatch触发mapDispatchToProps定义的actions

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)
阅读 2.8k
1 个回答

用法是没错的,我觉得报错应该是因为你把
this.props.actions.openSidebar()
写成
this.props.actions.openSideBar()
了吧

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题