Обновить визуализируемый компонент в ReactNative

Question

Я использую ReactNative и Flux и не слежу за тем, как визуализировать другой компонент здесь UserStore.addChangeListener(function(){}); вместо Form. Итак, у меня есть форма для входа в систему, если логин был успешным - мне нужно отобразить NewsFeed. Как я могу это сделать?

import NewsFeed from './NewsFeed'; 

var Form = React.createClass({ 
    componentWillMount: function() { 
    UserStore.addChangeListener(function(){}); 
    }, 
    logIn: function() { 
    fetch(
     // ... 
    ); 
    }, 
    render: function() { 
    return (
     <View> 
     <TouchableHighlight onPress={this.logIn}> 
      Log In 
     </TouchableHighlight> 
     </View> 
    ); 
    } 
}); 

export default Form; 

UPD:

var Main = React.createClass({ 
    getInitialState: function() { 
    return { 
     loggedIn: false 
    } 
    }, 

    componentWillMount: function() { 
    UserStore.addChangeListener(function(){ 
     this.setState({ loggedIn: true }) 
    }); 
    }, 

    shouldComponentUpdate: function() { 
    return component = <NewsFeed />; 
    }, 

    render: function() { 
    var component = this.state.loggedIn ? <NewsFeed /> : <AuthForm />; 

    return (
     <View style={styles.container}> 
     { component } 
     </View> 
    ); 
    } 

}); 

Answer 1

Не будучи в состоянии видеть весь код, что-то вроде этого или близко к этому должно работать:

import NewsFeed from './NewsFeed'; 

var Form = React.createClass({ 

    getInitialState() { 
    return { 
     loggedIn: false 
    } 
    }, 

    componentWillMount() { 
    UserStore.addChangeListener((){}); 
    }, 

    logIn() { 
    fetch(
     // if login is successful 
     this.setState({ loggedIn: true }) 
    ); 
    }, 

    render() { 

    let newsfeed, button, { loggedIn } = this.state 

    if(loggedIn){ 
    newsfeed = <NewsFeed /> 
    } 

    if(!loggedIn) { 
    button = <TouchableHighlight onPress={this.logIn}> 
       Log In 
      </TouchableHighlight> 
    } 

    return (
     <View> 
     { button } 
     { newsfeed } 
     </View> 
    ); 
    } 
}); 

export default Form;