Как использовать пароль сброса firebase на странице входа в React-Redux - PullRequest
Новая
       15

Как использовать пароль сброса firebase на странице входа в React-Redux

1 голос
/ 13 октября 2019

Я пытаюсь включить функцию сброса пароля с помощью firebase на своей странице входа вact-redux, однако я немного растерялся.

Я включил приведенный ниже код в свой userActions.js, а также установил firebaseна стороне клиента. 

export const resetPassword = email => async dispatch => {
  try {
    firebase
      .auth()
      .sendPasswordResetEmail(email)
      .then(() =>
        dispatch({
          type: RESET_SUCCESS,
          payload: "Reset email sent. Go check your inbox."
        })
      )
      .catch(err => {
        dispatch({
          type: RESET_ERROR,
          payload: "...some message for the user..."
        });
      });
  } catch (err) {
    dispatch({
      type: RESET_ERROR,
      payload: "...some message for the user..."
    });
  }
};

В мои types.js я также включил это 

export const RESET_SUCCESS = "RESET_SUCCESS";
export const RESET_ERROR = "RESET_ERROR";

Я также импортировал resetPassword на своей странице входа в систему 

import { resetPassword } from "../redux/actions/userActions";

Мой вопрос заключается в том, что ... как я могу добавить resetPassword, который я импортировал, к кнопке под названием «Reset Password»? N / B: я использовал handleSubmit для входа в систему. Я также использую форму из Material UI для моей функциональности входа. Я новичок в реакции, я был бы очень признателен, если бы кто-то помог мне

1 Ответ

0 голосов
/ 13 октября 2019

При условии, что ваша функция resetPassword работает правильно. Вы можете использовать его в своем реактивном компоненте так: 

import React, { Component } from 'react';
import { Buttton } from 'material-ui';
import { resetPassword } from '../redux/actions/userActions';

class Example extends Component {
  state = { loading: false };
  handleReset = async () => {
    const { email, dispatch } = this.props;
    this.setState({ loading: true });
    await resetPassword(email)(dispatch);
    // message or alert you want to display
    this.setState({ loading: false });
  };
  render() {
    return (
      <Buttton loading={this.state.loading} onClick={this.handleReset}>
        Reset Password
      </Buttton>
    );
  }
}

export default connect()(Example);
...