React Redux Firebase：firebase.auth(...).signOut(...).then(...).error 不是函数

Question

当将其作为操作调用时，这个特定的 firebase 函数对我不起作用。登录、编辑用户名、注册，所有这些都可以正常工作……除了注销。

在查看了一些教程和 Google 自己的文档后，我认为这个函数可以像我实现的所有其他 firebase-auth 函数一样工作。

这是我对数据库的操作：

/* AuthUser.js */
export const login = credentials => {
  return (dispatch, getState, { getFirebase }) => {
    const firebase = getFirebase();

    firebase
      .auth()
      .signInWithEmailAndPassword(credentials.email, credentials.password)
      .then(() => {
        dispatch({ type: LOGIN_SUCCESS });
        dispatch(push('/home'));
      })
      .catch(err => {
        dispatch({ type: LOGIN_FAIL, err });
      });
  };
};

export const logout = () => {
  return (dispatch, getState, { getFirebase }) => {
    const firebase = getFirebase();

    firebase
      .auth()
      .signOut()
      .then(() => {
        dispatch({ type: LOGOUT_SUCCESS });
        dispatch(push('/login'));
      }) /* ERROR POINTS RIGHT AT THIS LINE */
      .error(err => {
        dispatch({ type: LOGOUT_FAIL, err });
      });
  };
};

export const register = user => {
  return (dispatch, getState, { getFirebase }) => {
    const firebase = getFirebase();

    firebase
      .auth()
      .createUserWithEmailAndPassword(user.email, user.password)
      .then(res => {
        return res.user.updateProfile({
          displayName: user.displayName,
        });
      })
      .then(() => {
        dispatch({ type: REGISTER_SUCCESS });
        dispatch(push('/login'));
      })
      .catch(err => {
        dispatch({ type: REGISTER_FAIL, err });
      });
  };
};

export const save = displayName => {
  return (dispatch, getState, { getFirebase }) => {
    const firebase = getFirebase();

    const user = firebase.auth().currentUser;

    if (displayName !== '') {
      user
        .updateProfile({
          displayName,
        })
        .then(() => {
          dispatch({ type: SETTINGS_NAME_CHANGED });
          dispatch(push('/home'));
        })
        .catch(err => {
          dispatch({ type: SETTINGS_ERROR, err });
        });
    } else {
      dispatch({ type: SETTINGS_LEFT_ALONE });
      dispatch(push('/home'));
    }
  };
};

这是我在调用其中一些函数的组件中设置连接的方式。

/* Settings.js */
import React from 'react';
import { /* Some Stuff */ } from 'reactstrap';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

import 'someStyles.scss';
import { logout, save } from '../store/actions/authUser';

class Settings extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      displayName: '',
    };
  }

  /* This doesn't! */
  onLogout = event => {
    event.preventDefault();
    this.props.logout();
  };

  /* This works! */
  onSubmit = event => {
    event.preventDefault();
    this.props.save(this.state.displayName);
  };

  onChange = event => {
    this.setState({
      [event.target.id]: event.target.value,
    });
  };

  render() {
    const { displayName } = this.state;
    return (
      <Container className=".settingsBody">
        <nav>
          <Nav>
            <NavItem>
              <NavLink href="https://github.com">GitHub</NavLink>
            </NavItem>
            <NavItem>
              <NavLink>
                <div onClick={this.onLogout.bind(this)}>Logout</div>
              </NavLink>
            </NavItem>
          </Nav>
        </nav>
        <Form onSubmit={this.onSubmit.bind(this)}>
          <FormGroup>
            <Label for="displayName">Change Display Name</Label>
            <Input
              type="text"
              name="text"
              id="displayName"
              placeholder={this.props.auth.displayName}
              value={displayName}
              onChange={this.onChange}
            />
          </FormGroup>
          <Button color="primary">Save Settings</Button>
        </Form>
      </Container>
    );
  }
}

Settings.propTypes = {
  logout: PropTypes.func.isRequired,
  save: PropTypes.func.isRequired,
  authError: PropTypes.string,
  auth: PropTypes.object,
};

const mapStateToProps = state => {
  return {
    authError: state.auth.authError,
    auth: state.firebase.auth,
  };
};

const mapDispatchToProps = dispatch => {
  return {
    logout: () => dispatch(logout()),
    save: displayName => dispatch(save(displayName)),
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Settings);

React 抛出此错误：TypeError: firebase.auth(...).signOut(...).then(...).error is not a function 然而其他函数在运行时按预期运行。

我有什么遗漏吗？代码将尝试导航到我想要的页面，但在该页面正确挂载之前引发错误。

Answer 1

Promises 没有.error 回调，应该是.catch。

了解Using Promises