react-native - 使用react native和redux实现FB登录

Question

我想在我的基于 React Native 的应用程序中使用 Redux 框架来实现 Facebook 登录(我现在正在学习 Redux)。我正在寻找有关如何构建 Facebook 登录代码以使用 redux 的建议。更具体地说，我应该创建哪些操作、 reducer 和存储？

下面是我的应用程序中当前基于 Facebook 的登录代码(它不使用 redux 结构)。为了简单起见，我删除了不相关的代码:

index.ios.js

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 (
      <View style={styles.app}>
        <Component
          user={this.state.user}
          navigator={navigator}
          route={route}
        />
      </View>
    );
  }

  render() {
    return (
      <Navigator
        renderScene={this.renderScene.bind(this)}
        initialRoute={{
          // Render the Login page in the beginning
          component: Login,
          props: {
            onLogin: this.handleLogin.bind(this),
          },
        }}
      />
    );
  }
}

登录.js

// 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) => {
      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) => {
      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 (
        <Text></Text>
      );
    }

    // This renders when access token is not available after calling getAccessToken
    return (
      <View style={styles.container}>
        <TouchableHighlight
          onPress={this.onLoginButtonPress.bind(this)}
          >
          <View>
            // Login Button
          </View>
        </TouchableHighlight>
      </View>
    );
  }
}

// Removed the styling code

注销.js

import { FBSDKLoginManager } from 'react-native-fbsdklogin';

class Logout extends React.Component {
  onLogOut() {
    FBSDKLoginManager.logOut();
    this.props.onLogOut();
    this.props.navigator.popToTop();
  }

  render() {
    return (
      <View>
        <TouchableHighlight
          onPress={this.onLogOut.bind(this)}
          >
          <View
            // Styles to create Logout button
          </View>
        </TouchableHighlight>
      </View>
    );
  }
});

// Removed the styling code

Answer 1

你看过这个库吗: https://github.com/lynndylanhurley/redux-auth ？