2016-04-14 60 views
3

çalışmıyor bağlanıyorsanız, ancak bağlantı pervane enjekte edilmez, Tepki-Redux benim codepen kalem + Redux Tepki kullanmaya çalışıyorum

Belki onun amatör olmanın çünkü, bir şey eksik. Lütfen bir göz at. Ayrıca 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') 
); 

,,, ben de buraya mağaza yapılandırabilirsiniz redux DevTools'un (krom uzantısı) kullanmak için kendini codepen. Eklemeyi denedim ... window.devToolsExtension? window.devToolsExtension(): f => f, mağaza oluştur ama işe yaramıyor. yardım

cevap

3

Bağlan için teşekkürler bileşeninin yeni bir örneğini döndürür -

...> ES6 öğrenme - : -

birileri yanıtlayan iken aynı zamanda iyi dokümantasyon/videoyu tavsiye edebilir Sanırım. Bu, bir dekoratör olarak bağlantı kullanarak çalışır.

@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> 
    ); 
    } 
} 
+0

Hey sayesinde Evet figüran olarak devleti getiriyor mu ama ben her dersten önce @connect (...) eklemeniz gerekir demek & çok değişiklikleri saklamak için tasalamıştır ?. Bu durumda bir mapDispatchToProps nasıl çalışır. Ayrıca bu react-redux.min.js işi değil -> Yerel ortamda iyi çalışıyor gibi görünüyor. Kaybettiğim bir şey olmalı, ki onu tıklamıyor. – user4076248

+0

Teknik olarak evet. Ama birkaç konteyner bileşenini 'bağlamak' tercih edersiniz. 'connect'' mapStateToProps' ve 'mapDispatchToProps' öğelerini alır, daha sonra '@connect (state => ({...}), dispatch => ({addTodo: (value) => dispatch (addTodo) (value))})) ve 'actions' dosyasında' addTodo' işlevini açıklayın: const addTodo = value => dispatch (...). (girinti için özür dilerim) –

+0

Cevabınızı kabul etmekten memnuniyet duyuyorum, çünkü bir dekoratör olarak bağlantı eklediğimde, aslında, gönderdiğimde başlaması gereken pervane olarak eyaleti enjekte ediyor. Yine de ben hala benimle (mapStateToProps) (ComponentName) tepki-redux.min.js dosyasını aldığımda neden çalışmadığıyla ilgili merak ettim. Lütfen görüşünüzü, neden çalışmadığınıza dair olarak paylaşın. Yine, yardım için teşekkürler. – user4076248

3

Bağlantının sonucunu yeni bir değişkene kaydetmeyi unutmuşsunuzdur. Ve bu yeni değişken, Tmap yerine kullanmanız gereken şey. cevap için

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

- merhaba Leif, bunun için teşekkürler, ama Guillaume'in cevabından sonra daha önce farkettim :). İyi bir şey olsa da, @ sembolü ve kullanımı hakkında bilgi sahibi olmalıyım. – user4076248

+0

Ah evet, ... Şimdi yorumunuzu görüyorum. –

İlgili konular