Компонент не перерисовывается при смене магазина - PullRequest
Новая
       5

Компонент не перерисовывается при смене магазина

0 голосов
/ 08 октября 2018

Есть компонент для отображения информации о пользователе.Однако, когда пользователь выходит из системы и больше не должен быть в магазине (я также настроил рассылку для этого).Кроме того, я могу перезагрузить всю страницу, а затем отображается информация о пользователе.У меня были попытки с componentDidUpdate и componentDidMount, но я не могу понять это.

Вот компонент вида: 

// import React from "react";
// import { connect } from "react-redux";
// import { getUser } from "../store/actions/userActions";
// import { withRouter } from 'react-router-dom';

import React from 'react';
import { connect } from 'react-redux';

import * as actions from '../store/actions/auth';

class UserDetailView extends React.Component {
  componentDidMount() {}
  shouldComponentUpdate(nextProps, props) {
    console.log(nextProps);
    const username = this.props.user.username;
    console.log(username);
    if (username !== nextProps.username) {
      console.log(username);
      return true;
    } else {
      return false;
    }
  }
  render() {
    const user = this.props.user;

    return (
      <div>
        {this.props.user ? (
          <div>
            <h3>{user.username}</h3>
            {this.props.user.email}
          </div>
        ) : (
          <h3>Not Logged In</h3>
        )}
      </div>
    );
  }
}
const mapStateToProps = state => ({
  username: state.username,
  user: state.user
});
const mapStateToDispatch = dispatch => ({
  onTryAutoSignup: () => dispatch(actions.authCheckState()),
  getfetchUser: id => dispatch(actions.fetchUser(id))
});

export default connect(
  mapStateToProps,
  mapStateToDispatch
)(UserDetailView);

// class UserDetailView extends React.Component {

//   componentDidMount() {
//     const {  getUser, userID  } = this.props
//     getUser(userID)  //fixed
//   }
//   render() {

//   console.log(this.props.userID)
//   console.log(this.props.user)

//     return (
//       <ul>
//         {this.props.user.map(user =>
//           <li key={user.id}>{user.username}</li>
//         )}
//       </ul>
//     );
//   }
// }

// const mapStateToProps = (state, ownProps) => ({
//   user: state.user,
//   userID: ownProps.match.params.userID,

// });
// const mapDispatchToProps = dispatch => ({   //added
//   getUser: (userID) => dispatch(getUser(userID))
// })

// export default withRouter(connect(mapStateToProps, {getUser})(UserDetailView));  //fixed

Редуктор: 

const getUserInformation = (state, action) => {
  return Object.assign({}, state, {
    user: action.payload.user
  });
};

Генератор действий и Действие 

export const authSuccess = (token, username) => {
  return {
    type: actionTypes.AUTH_SUCCESS,
    token: token,
    username: username
  };
};

export const fetchUser = username => {
  return dispatch => {
    return axios
      .get(`http://127.0.0.1:8000/api/user/${username}/`)
      .then(res => {
        const user = res.data;
        dispatch(getUserInformation(user));
      });
  };
};

1 Ответ

0 голосов
/ 18 октября 2018

Я не вижу причин для переопределения shouldComponentUpdate, просто наследуйте от React.PureComponent.

У вас есть некоторые путаницы в создателях действий и уменьшителях.Должно быть что-то вроде этого: 

dispatch(setUserInformation(user)); // dispatch action

const setUserInformation = ({ type: 'SET_USER_INFORMATION', user }); // this is the action creator, returns an object with the type and the payload

const reducer = (state, action) { // this is the reducer
  switch (action.type) {
    case 'SET_USER_INFORMATION':
      return {
        ...state,
        user: action.user
      }
  }
}
...