Компоненты Simple React не будут обновляться после изменения состояния Redux - PullRequest
Новая
       1

Компоненты Simple React не будут обновляться после изменения состояния Redux

1 голос
/ 11 марта 2019

У меня есть следующий компонент 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;
  }
}

1 Ответ

2 голосов
/ 11 марта 2019

В вашем коде редуктора вы изменяете переданный объект состояния.

Далее происходит реакция, которая обрабатывает состояние как неизменное (это тот же объект), следовательно, оно не перерисовывает его.

Чтобы исправить это, измените 

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

на 

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

Это создаст новый объект и скопирует свойства из исходного состояния + новые.

...