Обновление информации профиля пользователя с помощью redux в firebase - PullRequest
Новая
       18

Обновление информации профиля пользователя с помощью redux в firebase

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

Я пытаюсь использовать 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;

Есть идеи, что мне здесь не хватает?

1 Ответ

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

В вашем редукторе поменяйте как показано ниже 

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

Выше, если вы хотите обновить весь пользовательский объект

Если вы хотите изменить только имя, тогда

Предположим, что profileName находится в объекте пользователя, тогда 

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

};

...