Функция инициализации React-redux независимо от изменений состояния

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

У меня есть компонент, и когда он монтируется, я делаю асинхронный запрос с помощью создателя действий, чтобы получить некоторые значения по умолчанию, также я вызываю somethingElse() позже, что заставляет мой пользовательский интерфейс снова перерисовываться, потому что состояние было обновлено:

Вот создатель действия:

export function requestDefaults(){    
  return {
    type:     REQUEST_DEFAULTS,
    payload:  axios.get(ROOT_URL),
  };
}

export function somethingElse(){    
  return {
    type:     SOME_OTHER,
    payload:  "Whatever",
  };
}

И мой редуктор:

switch (action.type) {
    case REQUEST_DEFAULTS:
      return action.payload.data;
      break;

    case SOME_OTHER:
      return action.payload;
      break;

    default:
      return state;
}

В моем компоненте - когда он установлен, я делаю асинхронный запрос, а когда получаю ответ, я делаю пользовательский интерфейс видимым - в этом упрощенном случае кнопка, которая вызывает somethingElse:

componentDidMount(){
   this.props.requestDefaults();
 }


render(){
  // Have received async data show button - THIS NEEDS TO BE ONLY ONCE
  if( this.props.defaults.data !== undefined ){
     <a onClick={ this.props.someThingElse }>do it</a>
  }
}

// REQUEST_DEFAULTS & SOME_OTHER
function mapStateToProps( { defaults, someOther} ){
  return { defaults, someOther} 
}

Теперь всякий раз, когда я вызываю this.props.someThingElse, вносятся изменения в состояние, и в моей функции render() кнопка снова перерисовывается, что является проблемой - мне нужно, чтобы она отображалась только один раз, когда я получаю асинхронные данные. Но теперь состояние было обновлено, и render() вызывается снова, и поскольку теперь у меня есть this.props.defaults.data, моя кнопка снова перерисовывается, но мне нужно, чтобы это было сделано только один раз после первого асинхронного вызова, а не при изменении состояния позже...


reactjs javascript redux react-redux
person bukowski    schedule 18.05.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете использовать метод shouldComponentUpdate и выполнять повторную визуализацию только в том случае, если данные по умолчанию были изменены. В вашем случае данные по умолчанию изменяются только один раз (по умолчанию он пуст, на следующем шаге есть некоторые данные), поэтому метод рендеринга будет вызываться только один раз.

shouldComponentUpdate(nextProps, nextState) {
  return this.props.defaults.data !== nextProps.this.props.defaults.data;
}
person VelikiiNehochuha    schedule 18.05.2016
comment
Круто, я просто просматривал документы React и нашел этот метод, и теперь вы тоже это подтвердили. Большое спасибо за быстрый ответ! - person bukowski; 18.05.2016
comment
Хм, я столкнулся с другой проблемой сейчас. Если я хочу, чтобы отображались другие вещи, кроме кнопки... если shouldComponentUpdate возвращает false, тогда ничего не отображается.... - person bukowski; 18.05.2016
comment
Вы можете добавить дополнительные параметры для возврата true в shouldComponentUpdate, но тогда повторный рендеринг будет вызываться более одного раза. Я думаю, что лучшим решением здесь будет держать эту кнопку в отдельном компоненте и передавать обратный вызов через реквизит. - person VelikiiNehochuha; 18.05.2016