Dispatch-Redux-Aktion von einem Fenster-Ereignis-Listener

Question

Ich verfolge das container/ui_component-Muster, um reduktive Dispatch-Aktionen an meine ui_component vom übergeordneten Container zu übergeben. Ich kann die Dispatch-Aktionen erfolgreich innerhalb der Render-Methode der ui_component aufrufen, zum Beispiel das unten beschriebene onClick-Ereignis funktioniert einwandfrei.

Mein Problem ist, ich kann nicht die gleichen Aktionen von einem eventListener (handleResize) innerhalb der gleichen Komponente auslösen.

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 

Dies ist meine erste React/Redux/ES6-Projekt, so könnte dies etwas einfaches sein. Jede Anleitung wäre willkommen.

Answer 1

Methode 'updateDashVis' wird über Requisiten übergeben, die keine Bindung im Konstruktor benötigen, aber Sie sollten 'diese' Referenz an handleResize Methode in einem Konstruktor binden. Also Ihr Konstruktor würde unten mögen ...

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

}