title: Implement FB login with react native and redux
body: <p>I want to use Redux framework in my react native based app for implementing Facebook login (I am learning Redux at the moment). I am looking for suggestions on how to structure my Facebook login code to use the redux. More specifically, what actions, reducer and store should I create?</p>
  
  <p>Below is the current Facebook based login code that I have in my app (it does not use redux structure). I have deleted the unrelated code to keep things simple:</p>
  
  <p>index.ios.js</p>
  
  <pre><code>class ProjectXApp extends React.Component {
    constructor(props) {
      // Set the use to NULL
      this.state = {
        user: null,
      };
    }
  
    handleLogin(user) {
      this.setState({
        // Update the user state once the login is complete
        user,
      });
    }
  
    renderScene(route, navigator) {
      const Component = route.component;
  
      return (
        &lt;View style={styles.app}&gt;
          &lt;Component
            user={this.state.user}
            navigator={navigator}
            route={route}
          /&gt;
        &lt;/View&gt;
      );
    }
  
    render() {
      return (
        &lt;Navigator
          renderScene={this.renderScene.bind(this)}
          initialRoute={{
            // Render the Login page in the beginning
            component: Login,
            props: {
              onLogin: this.handleLogin.bind(this),
            },
          }}
        /&gt;
      );
    }
  }
  </code></pre>
  
  <p>Login.js</p>
  
  <pre><code>// Import Facebook Login Util Component
  
  class Login extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        // 'false' means responseToken is not required. 'true' means responseToken is required
        responseToken: false,
      };
    }
  
    // This method gets the fb access token, if the token is returned then 
    // I render the Main App component (switchToMain method). If the
    // access token is not returned then I render a login Button (Refer to render method)
    async getAccessToken() {
      let _this = this;
      await (FBSDKAccessToken.getCurrentAccessToken((token) =&gt; {
        if(!token) {
          _this.setState({responseToken: true})
          return;
        }
  
        _this.setState({responseToken: true});
        _this.props.route.props.onLogin({user: true});
        _this.switchToMain();
      }));
    }
  
    switchToMain() {
      this.props.navigator.push({
        component: Main, // Render the app
        props: {
          onLogOut: this.onLogOut.bind(this)
        }
      });
    }
  
    componentDidMount() {
      this.getAccessToken();
    }
  
    onLoginButtonPress() {
      // Shows transition between login and Main Screen
      this.setState({responseToken: false})
      FBSDKLoginManager.logInWithReadPermissions(['public_profile','email','user_friends'], (error, result) =&gt; {
        if (error) {
          alert('Error logging in');
        } else {
          if (result.isCancelled) {
            alert('Login cancelled');
          } else {
            this.setState({result});
            this.getAccessToken();
          }
        }
      });
    }
  
    onLogOut() {
      this.setState({responseToken: true});
    }
  
    render() {
      // This component renders when I am calling getAccessToken method
      if(!this.state.responseToken) {
        return (
          &lt;Text&gt;&lt;/Text&gt;
        );
      }
  
      // This renders when access token is not available after calling getAccessToken
      return (
        &lt;View style={styles.container}&gt;
          &lt;TouchableHighlight
            onPress={this.onLoginButtonPress.bind(this)}
            &gt;
            &lt;View&gt;
              // Login Button
            &lt;/View&gt;
          &lt;/TouchableHighlight&gt;
        &lt;/View&gt;
      );
    }
  }
  
  // Removed the styling code
  </code></pre>
  
  <p>Logout.js</p>
  
  <pre><code>import { FBSDKLoginManager } from 'react-native-fbsdklogin';
  
  class Logout extends React.Component {
    onLogOut() {
      FBSDKLoginManager.logOut();
      this.props.onLogOut();
      this.props.navigator.popToTop();
    }
  
    render() {
      return (
        &lt;View&gt;
          &lt;TouchableHighlight
            onPress={this.onLogOut.bind(this)}
            &gt;
            &lt;View
              // Styles to create Logout button
            &lt;/View&gt;
          &lt;/TouchableHighlight&gt;
        &lt;/View&gt;
      );
    }
  });
  
  // Removed the styling code
  </code></pre>