How to split state between multiple Navigator scenes in React-Native

Question

I want to share user information for all screens of my application. (e.g. similar to a session in webapps). How can I achieve this in standard standard reaction based mode.

So far, I have achieved this by saving User all the information as a state in the main component, and then passing the state of the main component as a property of the child components. Below is the abbreviated code for the components -

 var MainComponent = React.createClass({
  getInitialState: function(){  
    return {
      user: {
        mobileNumber: "",
        emailId:"",        
      },
      userValidationStatus: false
    };
  },
  _renderScene: function(){
     switch(route.id){
      case 1:
          return <Screen1 navigator={navigator} parentState={this.state}/>
      case 2:
          return <Screen2 navigator={navigator} parentState={this.state} />   
      default: 
          return <Screen1 navigator={navigator} /> 
    }
  }, 
  render: function(){
    return (
        <Navigator
          initialRoute={{ 
            id: 1,
            title: 'someTitle'               
          }}
          renderScene={this._renderScene}   
          navigator={this.props.navigator}  
        />    
    );
  }
});

var Screen1 = React.createClass({ 
  render: function(){
    return ( 
      <View>     
            <TextInput
              autoFocus='true'             
              onChangeText={(mobileNumber) => this.props.parentState.user.mobileNumber=mobileNumber} 
              value={this.state.mobileNumber} 
            />  
            <TextInput  
              onChangeText={(emailId) => this.props.parentState.user.emailId=emailId} 
              value={this.state.emailId} 
            /> 
       </View>
    );
  }
});
var Screen2 = React.createClass({ 
  render: function(){
    return ( 
      <View>     
            <TextInput
              autoFocus='true'             
              onChangeText={(mobileNumber) => this.props.parentState.user.mobileNumber=mobileNumber} 
              value={this.state.mobileNumber} 
            />  
            <TextInput  
              onChangeText={(emailId) => this.props.parentState.user.emailId=emailId} 
              value={this.state.emailId} 
            /> 
       </View>
    );
  }
});

Is this the right way to achieve this? If not, what is the correct way to achieve this functionality.

Answer 1

() .

- /, ​​ Flux Redux ( Flux).

, , , . Flux Redux.