组件未在 redux 存储更改时重新呈现答案

【问题标题】：Component not rerendering on a redux store change组件未在 redux 存储更改时重新呈现
【发布时间】：2018-10-08 03:37:16
【问题描述】：

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

【问题讨论】：

标签： reactjs redux react-redux

【解决方案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
      }
  }
}

【讨论】：