Reagieren Native + Redux: connect Problem

Question

Ich bin ziemlich neu zu React Native/Redux. Versuchend zu studieren schrieb ich das einfachste Beispiel. Aber es scheint, Verbindung funktioniert nicht. Kann mir jemand erklären warum?

Mein Code

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    Text, 
    View 
} from 'react-native'; 
import { createStore } from 'redux'; 
import { connect, Provider } from 'react-redux'; 

function reducer(state, action) { 
    if(state === undefined) 
    return { 
     age: 31 
    }; 

    return state; 
} 

var store = createStore(reducer); 

const App = (props) => { 
    return (
    <View> 
     <Text>Store: { JSON.stringify(store.getState()) }</Text> 
     <Text>Props: { JSON.stringify(props) }</Text> 
    </View> 
); 
} 

class test0003 extends Component { 
    render() { 
    return (
     <Provider store={store}> 
     <App/> 
     </Provider> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
    age: state.age 
    } 
} 
export default connect(
    mapStateToProps 
)(App); 

AppRegistry.registerComponent('test0003',() => test0003); 

Ausgabe

Store: {"age":31} 
Props: {} 

Verbindung funktioniert nicht. Was ist mit diesem Code falsch?

Answer 1

Probleme aufgrund von Redux müssen Präsentations- und Containerkomponenten trennen. Korrekter Code:

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    Text, 
    View 
} from 'react-native'; 
import { createStore } from 'redux'; 
import { connect, Provider } from 'react-redux'; 

function reducer(state, action) { 
    if(state === undefined) 
     return { 
      age: 31 
     }; 

    return state; 
} 

var store = createStore(reducer); 

const App = (props) => { 
    return (
     <View> 
      <Text>Store: { JSON.stringify(store.getState()) }</Text> 
      <Text>Props: { JSON.stringify(props) }</Text> 
     </View> 
    ); 
} 

class test0003 extends Component { 
    render() { 
     return (
      <Provider store={store}> 
       <AppContainer/> 
      </Provider> 
     ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
     age: state.age 
    } 
} 
var AppContainer = connect(
    mapStateToProps 
)(App); 

AppRegistry.registerComponent('test0003',() => test0003); 

connect schafft Behälter AppContainer basierend auf Vorlage App.