Question

具有显示用户信息的组件。但是，当用户注销时，不再应该在商店中（我也为此设置了调度）。另外，我能够重新加载整个页面，然后显示用户信息。我一直在使用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));
      });
  };
};

Answer 1

我认为没有理由要覆盖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
      }
  }
}

组件未在Redux存储更改时重新呈现

1 个答案: