Question

我遵循container / ui_component模式将redux dispatch操作从父容器传递给我的ui_component。我可以在ui_component的render方法中成功调用调度操作，例如，下面的onClick事件工作正常。

我的问题是我无法从同一组件中的eventListener（handleResize）触发相同的操作。

import React, { Component, PropTypes } from 'react';
import { Link } from 'react-router';
import classNames from 'classnames';


class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.props.updateDashVis.bind(this); // not sure if this is doing anything
  }

  static contextTypes = {
    router: PropTypes.object
  };


  handleResize() { 
    this.props.updateDashVis('app-dash'); // returns undefined
  }

  componentDidMount() {
    window.addEventListener('resize', this.handleResize);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize);
  }

  componentWillUnmount() {
     this.props.resetMe();
  }



  render() {
      return (

        // ...
        <div className="top-bar">

          <div className="burger" onClick={()=> {this.props.updateDashVis(this.props.appDashVis)}} ><i className="fa fa-bars" aria-hidden="true"></i></div>
          {/* onClick works fine and action is fired  */}

        </div>

        // ...


      );
  }
}

export default Dashboard

这是我的第一个React / Redux / ES6项目，所以这可能很简单。欢迎任何指导。

Answer 1

方法'updateDashVis'通过props传递，不需要在构造函数中进行任何绑定，但是你应该在构造函数中绑定'this'对handleResize方法的引用。所以你的构造函数想在下面......

constructor(props) {
super(props);
this.handleResize = this.handleResize.bind(this);

}

从窗口事件侦听器调度redux操作

1 个答案: