title: react-native pass state globally using redux
body: <p>In my app, the LoginScreen(fristScreen) could login with facebook and when the user successfully login, the app receives a facebook <code>access token</code> and navigates to the next screen(VerifyScreen). In the VerifyScreen(secondScreen), when I click a button I want to bring the global state <code>facebookToken</code> and display on screen. Below is my code:</p>
  
  <p>App.js</p>
  
  <pre><code>import { createStore } from 'redux'
  import { Provider } from 'react-redux'
  import { createDrawerNavigator, createStackNavigator, } from 'react-navigation'
  
  const reducer = (state = '', action) =&gt; {
    switch (action.type) {
      case 'UPDATE':
              return { facebookToken: action.payload}
    }
      return state
  }
  
  const store = createStore(reducer)
  
  class App extends Component {
    render(){
      return(
  
        &lt;Provider store={store}&gt;
          &lt;View style={{flex:1,backgroundColor:'transparent'}}&gt;
            &lt;AppDrawerNavigator/&gt;
          &lt;/View&gt;
        &lt;/Provider&gt; 
      )
    }
  }
  </code></pre>
  
  <p>LoginScreen.js</p>
  
  <pre><code>import { LoginButton, AccessToken } from 'react-native-fbsdk';
  import {connect} from 'react-redux'
  
  class LoginScreen extends Component{
  
    &lt;View&gt;
              &lt;LoginButton
                onLoginFinished={
                  (error, result) =&gt; {
                    if (error) {
                      console.log("login has error: " + result.error);
                    } else if (result.isCancelled) {
                      console.log("login is cancelled.");
                    } else {
                      this.props.navigation.navigate('VerifyScreen')
                      AccessToken.getCurrentAccessToken().then(
                        (data) =&gt; {
                          this.setState({facebookToken:data.accessToken},
                      () =&gt;  console.log('facebookToken.state',this.state.facebookToken),
  //Here I am getting undefined for 'this.props.facebookToken'                        
  () =&gt;  console.log('facebookToken.props',this.props.facebookToken),
                          console.log('facebook login success!'),
                          console.log('facebook token is:',data.accessToken.toString()))
                        }
                      )
                    }
                  }
                }
                onLogoutFinished={() =&gt; console.log("logout.")}/&gt;
  
  //I created a button to see if I could call global state. but this would give me an error "state is not defined"
  &lt;Button
              title="call global state"
              onPress={() =&gt; this.props.increaseCounter()}/&gt;
  
  
  &lt;/View&gt;
  
  function mapStateToProps(state) {
      return {
          facebookToken: state.facebookToken
      }
  }
  
  function mapDispatchToProps(dispatch) {
      return {
          increaseCounter: () =&gt; dispatch({ type: 'UPDATE',payload: state.facebookToken }),
      }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen)
  </code></pre>
  
  <p>VerifyScreen.js</p>
  
  <pre><code>import React, { Component } from "react";
  import {
      View,
      Text,
      StyleSheet,
      Button
  } from "react-native";
  import {connect} from 'react-redux'
  
  
  class VerifyScreen extends Component {
      render() {
          return (
          &lt;View&gt;
            &lt;Button
                    title="Get facebook Access Token"
                    onPress={()=&gt;  
                     //I get undefined data when I console.log
           console.log(this.state.facebookToken,'this.state.facebookToken')}/&gt;
            &lt;Text style={{ fontSize: 20 }}&gt;{this.props.facebookToken}&lt;/Text&gt;
          &lt;/View&gt;
          );
      }
  }
  
  function mapStateToProps(state) {
      return {
          facebookToken: state.facebookToken
      }
  }
  
  export default connect(mapStateToProps, null)(VerifyScreen)
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center'
      }
  });
  </code></pre>
  
  <p>In my LoginScreen, when I console.log <code>this.state.facbookToken</code> I get the data, but when I navigate to the nextScreen(VerifyScreen) and console.log it, I get <code>undefined</code>. </p>
  
  <p>My question: how could I call global state from the VerifyScreen? 
  I am very new to redux so I might be doing things wrong. Any advise or comments would really help. Thanks in advance!</p>