Redux状态更改后，简单的React组件不会更新

Posted 2021-05-06

我将以下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);

减速机如下：

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;
  }
}

答案

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

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

修复它改变了

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

至

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

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