Реагировать на Redux Firebase: firebase.auth (...). SignOut (...). Then (...). Ошибка не является функцией - PullRequest
Новая
       33

Реагировать на Redux Firebase: firebase.auth (...). SignOut (...). Then (...). Ошибка не является функцией

0 голосов
/ 26 апреля 2019

Эта особая функция 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 Тем не менее, другие функции запускаются, как и ожидалось, при запуске.

Есть что-то, что я пропускаю? Код попытается перейти на нужную мне страницу, но выдает ошибку до того, как эта страница будет правильно подключена.

1 Ответ

2 голосов
/ 26 апреля 2019

Обещания не имеют .error обратного вызова, оно должно быть .catch.

Читать о Использование обещаний

...