2016-09-28 10 views
0

Ich stellte vor kurzem eine Frage (Simple window resize react), um das meiste dieser Lösung zu erhalten, aber jetzt bin ich in Redux einstecken, so dass ich den Web Service-Aufruf zu einem Aktionsersteller umgestalten und die Daten erhalten kann durch ein Reduzierstück. (. Der Aufruf erfolgt über JSONP-Versprechen, und ich bin mit dem entsprechenden redux Middleware)window.innerHeight mit React und redux

aber jetzt kann ich nicht window.innerHeight zu nutzen scheinen, wie es immer 200 zurück:/

Ist das Problem durch zu haben, dass einige von redox und einige davon von der Komponente (dh 'height') verwaltet werden?

Vielen Dank im Voraus!

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import GalleryItem from '../components/gallery_item'; 
import Nav from '../components/nav'; 
import { fetchImages } from '../actions/index'; 

export const MF = 'http://www.veilcraft.com'; 


class Gallery extends Component { 


    constructor(props) { 
     super(props); 

     this.state = { 
      images: [], 
      height: window.innerHeight 
     }; 

     this.handleResize = this.handleResize.bind(this); 
     this.props.fetchImages(); 
    } 

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

    handleResize(e) { 

     this.setState({ 
      height: window.innerHeight 
     }); 
    } 

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

    render() { 

     console.log(this.props.height); //outputs 200! 

     const galleryItems = this.props.images.map((image) => { 
      return <GalleryItem key={image} image={image} height={this.props.height} /> 
     }); 

     return (
      <div> 
       <Nav /> 
       <section> 
        {galleryItems} 
       </section> 
      </div> 
     ); 
    } 
} 

function mapStateToProps(state) { 

    return { 
     images: state.images 
    } 
} 


function mapDispatchToProps(dispatch) { 
    return bindActionCreators({ fetchImages }, dispatch); 
} 

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

Die Aktion:

import jsonp from 'jsonp-promise'; 
import { MF } from '../containers/gallery' 


export const FETCH_IMAGES = 'FETCH_IMAGES'; 

export function fetchImages() { 

    const url = `${MF}/home/` 
    const request = jsonp(url, {}).promise; 

    return { 
     type: FETCH_IMAGES, 
     payload: request //return promise   
    }; 
} 

Der Druckminderer:

import { FETCH_IMAGES } from '../actions/index' 

export default function(state = [], action) { 

    switch(action.type) { 
     case FETCH_IMAGES: 
      var images = action.payload.data.images.images.data.map((image) => { 
       return image.image; 
      }); 

      return [ ...images, ...state ]; 
    } 
    return state; 
} 

Antwort

1

In handleResize sind Sie den Zustand Ihrer Gallery Komponente zu aktualisieren. Sie übergeben dann die height down in GalleryItem als Prop.

Das bedeutet, dass innerhalb Gallery, Sie

console.log(this.state.height); 

Während innerhalb Galerie Sie schreiben können schreiben müssen:

console.log(this.props.height); 
+0

Dies macht Sinn, als mapStateToProps Bilder gewährleistet ist innerhalb this.props für die zur Verfügung stehende Komponente aber this.state.height ist davon nicht betroffen. Ich verstehe es jetzt. Vielen Dank! – mikejw