使用 React Redux Redux-Thunk 进行 Firebase 身份验证

Posted 2023-02-22

【中文标题】使用 React Redux Redux-Thunk 进行 Firebase 身份验证

【英文标题】：Firebase authentication with React Redux Redux-Thunk

【发布时间】：2018-01-02 10:14:25

【问题描述】：

我正在尝试在我的 react redux 应用程序中使用 firebase 进行身份验证。 我想在成功登录时将用户重定向到下一页，但在提交登录表单时出现错误

错误

Cannot read property 'then' of undefined

在 LoginForm 中处理提交功能

handleFormSubmit(event) 
    event.preventDefault();
    if (this.props.email !== '' && this.props.password !== '') 
      this.props.loginUser(this.props.email, this.props.password)
      .then(() => 
        this.context.router.push('/posts');
      );
     else 
      console.log('empty');
    
  

动作创建者

export function loginUser(email, password) 
  return (dispatch) => 
    dispatch( type: LOGIN_USER );
    firebase.auth().signInWithEmailAndPassword(email, password)
      .then(user => loginUserSuccess(dispatch, user))
      .catch(() => 
        console.log('failed to sign in');
        return;
      );
  ;



export function loginUserSuccess(dispatch, user) 
  dispatch(
    type: LOGIN_USER_SUCCESS,
    payload: user
  );

如果我从句柄提交函数中删除 then 验证有效，但我不知道如何将用户重定向到下一页？

【参考方案1】：

OP 没有提到它，但是对于那些使用 react-redux-firebase 并且它是 integration with redux-thunk 的人来说，它看起来像这样：

export function loginUser(email, password) 
  return (dispatch,  getFirebase ) => 
    return getFirebase()
      .login( email, password 
      .catch(() => 
        console.log('failed to sign in');
        return;
      );
  ;

也就是说，如果您使用firebaseConnect 或withFirebase 如the auth section of the docs 所示，则应该可以直接在您的组件中调用登录。

【参考方案2】：

我能够通过在调度中包含退货来解决此问题。我将更新后的代码放在这里以供将来的访问者使用。

export function loginUser(email, password) 
  return (dispatch) => 
    dispatch( type: LOGIN_USER );
    return firebase.auth().signInWithEmailAndPassword(email, password)
      .then(user => loginUserSuccess(dispatch, user))
      .catch(() => 
        console.log('failed to sign in');
        return;
      );
  ;

谢谢。

【讨论】：

是的，这就是我要发布的解决方案。您收到错误的原因是您没有返回 Promise。