Почему мое состояние не обновляется в моем компоненте?

Question

Я новичок в Redux, хотя раньше немного работал с React.

Я использую учебник , чтобы проверить использование в своем приложении действий, создателей действий и редукторов, и до сих пор думаю, что я нахожусь примерно на 90%.

  componentDidMount() {
    this.props.levelUp();
    this.props.levelUp();
    this.props.levelUp();
    this.props.levelUp();
    this.props.levelUp();
    console.log("final prop");
    console.log(this.props);
  }

const mapStateToProps = (state) => {
  console.log("state general");
  console.log(state.general);
  return {
    general: state.general,
  };
};

Здесь запускаются оба журнала консоли, и они увеличиваются с каждой операцией повышения уровня или уменьшаются с каждой операцией понижения уровня.

function mapDispatchToProps(dispatch) {
  return bindActionCreators(generalActions, dispatch);
}

Это в моем файле редуктора:

export default (state = 1, action) => {
  console.log(state);
    switch (action.type) {
      case 'LEVEL_UP':
      console.log(action.type);
        return state + 1;
      case 'LEVEL_DOWN':
          return state - 1;
    }
    return state;
  };

Кажется, что мои журналы консоли записывают правильный шаг - значение в редукторе увеличивается на единицу каждый раз, когда я вызываю this.props.levelUp ()

Однако, когда я делаю окончательную запись реквизита в componentDidMount(), значение равно 1.

Почему это? Я не постоянно сохраняю данные? Есть ли какая-то другая причина, по которой я не возвращаюсь так, как я себе представляю?

Answer 1

componentDidMount будет запущен один раз компонент установил. После этого ваши действия выполняются, поэтому вы должны делать свои console.log() заявления внутри чего-то вроде componentDidUpdate() или static getDerivedStateFromProps().

Подробнее о жизненных циклах в реакции: https://reactjs.org/docs/state-and-lifecycle.html

Привет