Как заставить реакт рисовать компонент с нуля?

Question

[ar5]

Добрый день, подскажите пожалуйста, каким образом в React сказать компоненту, чтобы он рендерился с 0. Использую связку React+redux+react-router. Есть главная страница и страница по типу /?id=uiid64. И при переходе на урл /?id=uiid64 отображается предыдущее состояние, а потом оно изменяется. Хотелось бы рендерить эту страницу с 0.

Answer 1

[Максим]

В reducer'e заводите переменную, например isFetching с состоянием true/false в моменты выполнения асинхронного запроса (true на REQUEST, false на SUCCESS).

В шаблоне компонента стилизуете этот момент с переменной isFetching как угодно: например показываете прелоадер, который полностью перекрывает предыдущие данные и как-то анимируется. Самый примитивный пример:

...
render()
...
  if (this.props.isFetching) {
    <p> Loading...</p>
  } else {
    <p> {ВАШИ_ДАННЫЕ} </p>
  }

Comments

[ar5]

Такая переменная есть, просто во время загрузки данных уже показываются предыдущие загруженные.

[Максим]

ar5: я понимаю прекрасно вашу ситауцию, вам нужно просто стилизовать это.

[Максим]

ar5: например показывайте div если isFetching === true, а у этого div сплошной бэкграунд белого фона (или какой у вас фон), а в середине этого diva - шестеренка вертится. Когда состояние isFetching изменится на false - у вас div спрячется и будут новые данные.

[ar5]

Максим: хорошо) спасибо) буду пробовать) думал есть возможность заставить его нативно рисовать с 0

[Максим]

ar5: я как-то даже не задумывался о таком =) можете просто тогда поставить if (isFetching) return null и все) будет "ничего".

[Максим]

ar5: если получится - отмечайте решением, если нет - пишите.

[ar5]

Максим: вот только попробовал все отлично сработало. Конечно при дебаге если ставить точку на это условие предыдущие данные видны. Но даже при медленном интернете все срабатывает отлично и загрузка компонента происходит с нуля. Спасибо)