时间戳

首页 > 解决方案 > 使用 Facebook 登录时，我的 react native 应用程序没有更新 redux 商店

javascript - 使用 Facebook 登录时，我的 react native 应用程序没有更新 redux 商店

问题描述

我正在通过 Firebase 使用 Facebook 登录构建一个 react-native 应用程序，并将凭据存储在我的 redux 状态中。在我的登录页面上，我有一个按钮触发检查该人是否已经登录。如果是，它直接进入“仪表板”（通过反应导航），如果该人未登录，它打开了 Facebook 流程。

我遇到的问题是，在通过 Facebook 流程之后，什么也没有发生。但是，当我再次单击“登录”按钮时，它确实成功加载了此人并进行了重定向。知道这里会发生什么吗？我有一种感觉，我没有正确使用我的 async/await，但似乎无法弄清楚。以下是我相关部分的代码。

/screens/Login.js 的一部分

  logUserIn = async (loadUser, setLoggedInUser) => {
    await loadCurrentUser(loadUser);
    console.log(this.props.user.name);
    if (Boolean(this.props.user.name)) {
      await setLoggedInUser(true);
    } else {
      loginWithFacebook()
      .then(loadCurrentUser(loadUser));
    }
  };

  render() {
    const { navigate } = this.props.navigation;
    const {
      loadUser,
      user,
      isLoggedIn,
      setLoggedInUser,
    } = this.props;
    return (
      <View style={ styles.container }>
        <Button
          title='Login'
          onPress={ () => this.logUserIn(loadUser, setLoggedInUser) }
          />
      </View>
    );
  }
}

/services/facebookAPI.js

export const loadCurrentUser = async (loadUser) => {
  const user = await userLoginStatus();
  console.log('pre-if: ' + Boolean(await user));
  if (Boolean(user)) {
    console.log('post-if: ' + Boolean(user));
    console.log(user.displayName + ' is logged in!');
    loadUser(user);
  } else {
    console.log('user not logged in');
    return null;
  }
};

/actions/actions.js

export const setLoggedInUser = (isLoggedIn) => (dispatch) => {
  dispatch({
    type: 'LOGGED_IN',
    isLoggedIn: isLoggedIn,
  });
  dispatch(NavigationActions.navigate({ routeName: 'Dashboard' }));
};

标签： javascriptreact-native

解决方案

您可以尝试走听者路线。基本上，在您的根组件中，您具有三种状态。正在加载、注销或登录。加载是初始状态，然后您检查结果是否onAuthStateChanged包括用户。如果是这样，那么您已登录，您可以加载登录的视图。如果没有，您可以加载已注销的视图（在您的情况下是 facebook 登录）。

componentWillMount () {
  this.unsubscriber = firebase.auth().onAuthStateChanged((user) => {
    if (user) {
      // Do your login!
    } else {
      // Do your logged out stuff!
    }
  )}


// Don't forget to unsubscribe:
componentWillUnmount () {
  if (this.unsubscriber) {
    this.unsubscriber()
  }
}

这很好的原因是一旦身份验证状态发生变化，firebase 就会在此处调用您的回调。因此，一旦他们使用 facebook 登录，这将触发，您将知道您已准备好开始处理登录内容。

推荐阅读