简单的 React 组件在 Redux 状态更改后不会更新答案

【问题标题】：Simple React components won't update after Redux state change简单的 React 组件在 Redux 状态更改后不会更新
【发布时间】：2019-03-10 22:37:32
【问题描述】：

我有以下 React 组件连接到 Redux 存储，即使存储的状态发生了变化（我检查过），组件 prop userIsLogged 也不会改变它的值。任何帮助表示赞赏！

const mapDispatchToProps = (dispatch) => bindActionCreators({deauthenticateUser}, dispatch);

const mapStateToProps = (state) => ({ userIsLogged: state.auth.loggedUser !== null });

const Logout = (props) => {

  const { userIsLogged } = props;

  return (
    userIsLogged?
    <Button 
      variant="outlined" 
      color="primary" 
      onClick={(e) => {
        props.deauthenticateUser();
        history.push('/login');
      }}>
      Exit
     </Button>
     :<div />
  );

}

Logout.propTypes = {
  userIsLogged: PropTypes.bool.isRequired
};

export default connect(mapStateToProps, mapDispatchToProps)(Logout);

reducer如下：

const initialState = {
  jwt: null,
  loggedUser: null,
  isLoading: false
}

export default function auth(state = initialState, action) {
  switch (action.type) {
    case 'GOT_JWT':
      return Object.assign(state, { jwt: action.jwt });
    case 'USER_LOGGING_IN':
      return Object.assign(initialState, { isLoading: action.isLoading });
    case 'USER_LOGGED_IN':
      return Object.assign(state, { loggedUser: action.loggedUser, isLoading: false });
    case 'NO_JWT':
      return initialState;
    case 'USER_LOGGED_OUT':
      return initialState;
    default:
      return state;
  }
}

【问题讨论】：

您是否遵循组件的数据更改流程（mapStateToProps... 中的调试器/断点等）？你的 action/reducer 发生了什么？
能贴一下reducer吗？您可能正在改变状态。
@MaxMillington 刚刚更新了问题。
@JohnRuddell 不，我一直在用console.log调试，哈哈。
Object.assign(state, { jwt: action.jwt }); -> Object.assign({}, state, { jwt: action.jwt });，以此类推

标签： reactjs redux react-redux

【解决方案1】：

在您的 reducer 代码中，您正在改变传递的状态对象。

接下来发生的是，react 将状态视为未更改（它是同一个对象），因此它不会重新渲染它。

要修复它，请更改

Object.assign(state, { jwt: action.jwt });

到

Object.assign({}, state, { jwt: action.jwt });

它将创建一个新对象并从原始状态 + 新状态复制属性。

【讨论】：