鍍金池/ 問答/HTML/ redux中bindActionCreators如何dispatch觸發(fā)mapD

redux中bindActionCreators如何dispatch觸發(fā)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怎么觸發(fā)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()
了吧

2017年8月31日 08:19