javascript - 如何在 React-Redux 登录页面中使用 firebase 重置密码

Question

我试图在我的react-redux登录页面中包含使用firebase的重置密码功能，但我似乎有点迷失。

我将下面的代码包含在我的 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";

我也在我的登录页面中导入了重置密码

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

我的问题是...如何将导入的重置密码添加到名为“重置密码”的按钮？ N/B:我使用handleSubmit 来实现用户登录功能。我还使用 Material UI 中的表单来实现登录功能。我是一个 react 新手，如果有人让我通过，我真的很感激

Answer 1

假设您的 resetPassword 函数工作正常。您可以在您的 react 组件中使用它，如下所示:

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);