在 React 容器组件中获取对 redux 调度的访问权限答案

【问题标题】：Obtaining access to redux dispatch in a react container component在 React 容器组件中获取对 redux 调度的访问权限
【发布时间】：2017-05-28 03:22:03
【问题描述】：

我有一个名为ButtonContainer 的容器组件，它将两位状态传递给按钮展示组件。问题是，容器需要传递一个使用 dispatch 的 onclick 函数，但我不知道如何访问它。请参阅下面的代码。我怎样才能获得调度？

ButtonContainer.jsx

import React from 'react'
import { connect } from 'react-redux'
import { fooAction , barAction } from '../foobarActions.js'
import ButtonComponent from './ButtonComponent.jsx'

const mapStateToProps = (state) => {
  var buttonText = this.state.foo + this.state.bar
  var buttonOnClick = function(e, coord) {
    e.preventDefault()
    if (e.nativeEvent.which === 1) { // left click
      dispatch(fooAction);
    } else if (e.nativeEvent.which === 3) {
      dispatch(barAction); // right click
    } else {
      console.log("Unknown click");
    }
  }
  return {
    buttonText: buttonText
    buttonOnClick: buttonOnClick
  }
}

const mapDispatchToProps = (dispatch) => {
  return {}
}

const ButtonContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(ButtonComponent)

export default ButtonContainer;

【问题讨论】：

为什么不通过buttonOnClick 和mapDispatchToProps？这是传递动作的首选方式。

标签： reactjs redux

【解决方案1】：

这是在mapDispatchToProps 函数中完成的，但您应该将“哪个点击”逻辑留在展示组件中 (ButtonComponent)。

class ButtonComponent extends React.Component {
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    e.preventDefault()
    if (e.nativeEvent.which === 1) { // left click
      this.props.leftClick();
    } else if (e.nativeEvent.which === 3) { // right click
      this.props.rightClick();
    } else {
      console.log("Unknown click");
    }
  }

  render() {
    return <button onClick={this.handleClick}>{this.props.buttonText}</button>
  }
}

const mapStateToProps = (state) => {
  return {
    buttonText: this.state.foo + this.state.bar
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    leftClick: () => dispatch(fooAction),
    rightClick: () => dispatch(barAction)
  }
}

const ButtonContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(ButtonComponent)

export default ButtonContainer;

【讨论】：