Реагировать на изменение состояния Redux - PullRequest
Новая
       12

Реагировать на изменение состояния Redux

0 голосов
/ 26 августа 2018

this.props.authState остается прежним, хотя я отправляю действие в моей функции componentDidMount: 

componentDidMount() {
      if (localStorage.getItem('token')) {
        dispatch(updateAuthState('AUTHENTICATED'));
      }
  }

render() {
 <div>{this.props.authState}</div>
}

Home.propTypes = {
    authState: PropTypes.string
};

const mapStateToProps = (state) => {
    return {
        authState: state.authState
    }
};

const mapDispatchToProps = (dispatch) => {
  return {

  }
};

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

вывод NO_AUTH (начальное значение authState)

Разбавление: 

export function authState(state = "NO_AUTH", action) {
    switch (action.type) {
        case 'AUTH_STATE':
            return action.authState;
        default:
            return state;
    }
}

есть идеи, почему?

Ответы [ 2 ]

0 голосов
/ 26 августа 2018

Вы в настоящее время отправляете прямо в componentDidMount, который не отображается в: 

connect(mapStateToProps, mapDispatchToProps)(Home);

Это должно сделать работу: 

componentDidMount() {
      if (localStorage.getItem('token')) {
        this.props.onUpdateAuthState('AUTHENTICATED');
      }
  }

const mapDispatchToProps = (dispatch) => {
  return {
    onUpdateAuthState: function(authState) {
      dispatch(updateAuthState(authState));
    }
  }
};

Теперь, это получит authState: 

const mapStateToProps = (state) => {
    return {
        authState: state.authState
    }
};
0 голосов
/ 26 августа 2018

Если вы изменяете состояние, компонент не будет визуализирован. Вам необходимо вернуть {...state, authState} из вашего редуктора. И вы подтверждаете свое обновленное состояние в 

componentWillReceiveProps(nextProps)
  {
   }

Я надеюсь, что это решит проблему.

...