javascript - react +Redux。执行容器和转储组件中定义的所有方法/操作

Question

当执行转储组件和容器中定义的所有方法时，我面临着奇怪的情况。 这是组件: 容器:

    import React,{Component, PropTypes} from 'react';
import { connect , Provider} from 'react-redux'
import { toggleMenu } from '../actions/'
import Menu from '../components/Menu'


function mapStateToProps (state) {
  var isOpenMenu = state.pageReducer.isOpenMenu != undefined ? state.pageReducer.isOpenMenu: true;
  return {isOpenMenu}
}
function mapDispatchToProps(dispatch) {
  return {
    toggleMenuFactory :  dispatch(toggleMenu())
  }
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Menu);

组件:

import React, { PropTypes, Component } from 'react'
import { Link } from 'react-router'
import { connect } from 'react-redux'
import MenuListItem from './MenuListItem'

import LeftNav from 'material-ui/lib/left-nav';
import RaisedButton from 'material-ui/lib/raised-button';
import MenuItem from 'material-ui/lib/menus/menu-item';


const menuItems = [
  { text: 'Petr Klimenko', link: '' },
  { text: 'developer', link: '' },
  { text: 'Env diff', link: '/envdiff' },
  { text: 'Export to Env', link: '/envexport' }
]

export default class Menu extends Component {

tapMenu () {
   // const {toggleMenu} = this.props;
   console.log(this.props)
}
  render () {

    return (
      <div id="menu" ref="menu" className={this.props.activeClass}>

          <LeftNav open={ this.props.isOpenMenu}>
            <ul>
              <MenuItem> <Link to="/">RocketSibel</Link></MenuItem>
              {menuItems.map((item, i) => <MenuListItem {...item} key={i} />)}
              <RaisedButton label="Toggle Menu"  onTouchTap={this.tapMenu()} />
            </ul>
          </LeftNav >

      </div>
    )
  }
}

在控制台中，我看到，当页面呈现时，方法toggleMenu 被执行，并且方法tapMenu 也被执行。我不知道为什么会这样

Answer 1

第一个问题是您没有将函数传递给事件处理程序，而是调用它。只需更改:

onTouchTap={this.tapMenu()}

至:

onTouchTap={this.tapMenu.bind(this)}

第二个问题是 connect 和 mapDispatchToProps 有不同的 api 。它应该是一个绑定(bind) Action 创建者的函数，尝试更改:

function mapDispatchToProps(dispatch) {
  return {
    toggleMenuFactory: dispatch(toggleMenu()) // this executes dispatch function
  }
};

至:

function mapDispatchToProps(dispatch) {
  return {
    toggleMenuFactory: () => dispatch(toggleMenu()) // provide wrapped function (action creator)
  }
};