Reagieren-Redux connect nicht

Question

arbeiten Ich versuche in meinem codepen Stift zu verwenden Reagieren + Redux, aber die connect ist die Stütze nicht Injizieren

Vielleicht ist es, weil ein Amateur zu sein, ich bin etwas fehlt. Bitte guck dir das an. http://codepen.io/sahil28v/pen/EKEKME?editors=0010

const { Component } = React; 
const { createStore, bindActionCreators, applyMiddleWare, combineReducers } =  Redux; 
const { Provider, connect } = ReactRedux; 

const Application =() => (
     <div className="ground"> 
    <Tmap /> 
     </div> 
    ); 

class Tmap extends Component { 
    constructor(props){ 
    super(props); 
    console.log(this.props.mapstate); // This is returning undefined,no idea why 
    console.log(store.getState().mapstate); // Though this returns val: "hey" as it should properly though. 
} 
render() { 
    return (
    <div> 

    </div> 
); 
} 
} 

const mapStateToProps = (state) => ({ 
mapstate: state.mapstate 
}); 

connect(mapStateToProps)(Tmap); 

const initialState = { 
    val: "hey" 
} 

const mapReducer = (state = initialState, action) => { 
return state ; 
} ; 

const rootReducer = combineReducers({ 
    mapstate: mapReducer, 
}); 

const store = createStore(rootReducer); 

React.render(
    <Provider store={store}> 
     <Application /> 
    </Provider>, document.getElementById('app') 
); 

Auch ,,, kann ich Speicher konfigurieren hier in codepen selbst für redux devtools (Chrome-Erweiterung) verwenden. Ich habe versucht, hinzuzufügen ... window.devToolsExtension? window.devToolsExtension(): f => f, um den Speicher zu erstellen, aber das funktioniert nicht.

Während jemand antwortet - können Sie auch eine gute Dokumentation/Video für empfehlen: -> ES6 Lernen ...

- Danke für die Hilfe

Answer 1

Connect gibt eine neue Instanz der Komponente Ich nehme an. Dies funktioniert, indem Sie connect als Dekorateur verwenden.

@connect(
    state => ({ 
    mapstate: state.mapstate 
    }) 
) 
class Tmap extends Component { 
    constructor(props){ 
    super(props); 
    alert(this.props.mapstate); // This is returning undefined,no idea why 
    alert(store.getState().mapstate); //As I understand this is the direct low level api which connect is meant to abstract away along with store.subscribe. 
    } 

    render() { 
    return (
    <div> 
    </div> 
    ); 
    } 
} 

Answer 2

Sie haben vergessen, das Ergebnis von connect in eine neue Variable zu speichern. Und diese neue Variable sollten Sie anstelle von Tmap verwenden.

const CTmap = connect(... 
.... 
<CTmap/>