Обновление состояния Redux не запускает componentWillReceiveProps

20

Я пытаюсь проверить регистрационную информацию. Убедившись, что логин действителен, я хочу запустить новый маршрут. Я передаю state.loginReducer.login как реквизит. Когда я обрабатываю событие отправки, отправляется действие, изменяя глобальное состояние входа.

В этом случае не должно запускаться ComponentWillReceiveProps ? так как реквизит изменился ?. Есть ли лучший способ реализовать эту функциональность?

handleSubmit (evt) {
    const {
        dispatch,
        login
    } = this.props;

    dispatch(actions.doLogin(value.login));
}

ComponentWillReceiveProps (nextprops) {
    const {
        login
    } = this.nextProps;

    if (login != null) {
        history.pushState({}, '/account');
    }
}

function mapStateToProps (state) {
    return {
        login: state.loginReducer.login
    }
}

export default connect(mapStateToProps)(Login);
    
задан João Lima 24.10.2015 в 20:55
источник
  • Очевидным решением будет использование обратного вызова (вот что я делаю прямо сейчас), но я до сих пор не уверен, что CWRP не будет уволен в этом случае. –  João Lima 25.10.2015 в 02:44
  • Вы определяете mapStateToProps как метод класса? Удостоверьтесь, что вы случайно не проходите мимо, чтобы не подключаться. –  Nathan Hagen 26.10.2015 в 14:42

2 ответа

27

Если state.loginReducer.login изменяется, то componentWillReceiveProps будет запущено. Если вы считаете, что ваш редуктор возвращает новое состояние, а componentWillReceiveProps не запускается, убедитесь, что новое состояние является неизменным. Возврат той же справки состояния, которая передается редуктору, не будет работать.

От Ссылка

Это неправильно:

function todos(state = [], action) {
  switch (action.type) {
  case 'ADD_TODO':
    // Wrong! This mutates state
    state.push({
      text: action.text,
      completed: false
    });
  case 'COMPLETE_TODO':
    // Wrong! This mutates state[action.index].
    state[action.index].completed = true;
  }

  return state;
}

Это правильно:

function todos(state = [], action) {
  switch (action.type) {
  case 'ADD_TODO':
    // Return a new array
    return [...state, {
      text: action.text,
      completed: false
    }];
  case 'COMPLETE_TODO':
    // Return a new array
    return [
      ...state.slice(0, action.index),
      // Copy the object before mutating
      Object.assign({}, state[action.index], {
        completed: true
      }),
      ...state.slice(action.index + 1)
    ];
  default:
    return state;
  }
}
    
ответ дан Nathan Hagen 26.10.2015 в 01:14
  • gist.github.com/lslima91/19e3d992a086d2baf3b2 это мой ресивер входа –  João Lima 26.10.2015 в 01:22
  • Это мертво. В моем случае проблема заключалась в том, что я делал это: return Object.assign (state, {key: newValue}); - вместо этого - вернуть Object.assign ({}, state, {key: newValue}) ;. Трюк здесь заключается в том, что запуск Object.assign с старым объектом, обновленным объектом THAT, в противоположность возврату чего-то нового, поэтому Redux, похоже, думал, что ничего не изменилось, даже если данные объекта (так как идентификатор остался прежним) , –  Sasha 18.03.2016 в 21:34
  • @ Саша спасибо, ваш комментарий действительно помог мне. Я создавал новый объект с одинаковыми ключами. Один из ключей содержал массив, который был мутирован, но на самом деле был ссылкой на старый массив из предыдущего состояния. –  rnli 06.07.2016 в 16:50
  • В моем случае я определенно делаю это правильно, но CWRP не запускается. Перед изменением моего асинхронного предыдущего CWRP показывает this.state и nextState как в старом состоянии, так и после изменения следующего CWRP показывает как в новом состоянии. Я никогда не вижу this.state со старым состоянием и nextState с новым. –  hippietrail 08.10.2017 в 06:32
  • Пожалуйста, просмотрите этот вопрос, я буду благодарен за вашу помощь: - stackoverflow.com/questions/49152672/... –  Siddharth 08.03.2018 в 14:03
8

ComponentWillReceiveProps (nextprops) должно быть componentWillReceiveProps (nextprops)

«C» должен быть строчным. Фактически, mapStateToProps запускает componentWillReceiveProps. Я в этом уверен.     

ответ дан vcycyv 24.12.2016 в 04:34