Question

我正在尝试在React应用程序中使用Redux从我的react组件更新Firebase数据库中的用户配置文件。

这是我的组件：

import { connect } from "react-redux";
import { Redirect } from "react-router-dom";
import { firestoreConnect } from "react-redux-firebase";
import { compose } from "redux";
import { editProfile } from "../../store/actions/editProfileActions";

class UserProfile extends Component {
  state = {
    firstName:"",
    initials:"",
    lastName:""
  };

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

  onSubmit = e => {
    e.preventDefault();
    console.log(this.state);
    this.props.editProfile(this.state);
  }

  render() {
    const { auth, profile } = this.props;
    console.log(profile);

    if (auth.isEmpty) return <Redirect to="/home" />;

    return (
      <div className="container">
      <form onSubmit={this.onSubmit} className="white">
        <h5 className="grey-text text-darken-3">Edit Profile</h5>
        <div className="input-field">
          <label htmlFor="title">First Name: {profile.firstName}</label>
          <input type="text" id="firstName" onChange={this.onChange} />
        </div>
        <div className="input-field">
          <label htmlFor="title">Initials: {profile.initials}</label>
          <input type="text" id="initials" onChange={this.onChange} />
        </div>
        <div className="input-field">
          <label htmlFor="title">Last Name: {profile.lastName}</label>
          <input type="text" id="lastName" onChange={this.onChange} />
        </div>
        <div className="input-field">
          <button className="btn black z-depth-0">Submit</button>
          { }
        </div>
        </form>
      </div>
    )
  }
};

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

const mapDispatchToProps = dispatch => {
  return {
  editProfile: edit => dispatch(editProfile(edit))}
}

export default compose(
  connect(mapStateToProps, mapDispatchToProps),
  firestoreConnect([
    { collection: "profile"}
  ])
)(UserProfile);

该组件正确显示当前用户信息。

这是我设置的操作：


  return async (dispatch, getState, { getFirestore, getFirebase }) => {
    const firebase = getFirebase();
    const user = await firebase
        .auth()
        .currentUser
        .updateProfile({
          firstName: profile.firstName
        });
        dispatch({ type: "EDITPROFILE_SUCCESS", user })
        console.log("user = " + profile.firstName);

  };
}

当我记录输入的profile.firstName时，我得到输入的数据。

还有我的减速器：

const editProfileReducer = (state, action) => {
  switch (action.type) {
    case "EDITPROFILE_ERROR":
      return {
        ...state,
      editError: action.error
  };
    case "EDITPROFILE_SUCCESS":
      return {
        ...state
  };
    default:
    return state;
  }
}

export default editProfileReducer;

知道我在这里缺少什么吗？

Answer 1

在减速器中更改以下内容

case "EDITPROFILE_SUCCESS":
  return {
    ...state,
    user:action.user
};

以上是如果您要更新整个用户对象

如果您只想更改名称

让我们假设profileName在用户对象中，然后

case "EDITPROFILE_SUCCESS":
  return {
    ...state,
    user:Object.assign({}, state.user, profileName:action.user.profileName)

};

在Firebase中使用Redux更新用户配置文件信息

1 个答案: