React и Flux: как получить данные при загрузке страницы?

Question

[uuushka]

Глупый вопрос, но не могу найти решение...
При переходе на другую станицу мне необходимо получить данные с сервака (например, имя и фамилия) и отобразить на странице.
Так вот, при загрузке componentDidNount дергает action:

componentDidMount() {
  Store.fetchData();  
}

console.log ('response', Store.fetchData()) пишет

Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}

В actions, store, source данные получены, но не могу их отрендерить.

Answer 1

[Никита Гущин]

Store.fetchData() возвращает Promise. Вам нужно дождаться пока придет ответ и потом уже рендерить Ваш компонент.

Store.fetchData().then( ... )

Или подписываться на Store каким-либо образом (зависит от выбранной реализации flux)

Store.on('DATA_LOADED', (data) => this.setState({ data }); //как пример

Comments

[uuushka]

спасибо, теперь хоть ошибок не пишет.
но в Store.fetchData().then(
function (data) {
console.log(data)
}
)

возвращает undefined..

Видимо где-то мой косяк

[Никита Гущин]

uuushka: тут сложно сказать. Нужно больше кода. Для начала проверьте - приходит ли ответ от сервера (вкладка network в дев тулс)

[uuushka]

Никита Гущин: понял глупую ошибку.... в source ответ был в блоке remote, когда я работал локально..

Answer 2

[Roman_Kh]

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

class SomeComponent {
  ...
  componentDidMount() {
      Store.addListener("DATA_CHANGED", this.handleChanged)
      Store.addListener("DATA_LOADED", this.handleLoaded)
  }
  ...
  handleLoaded(){
     // just force rendering (you can do something smart beforehand though)
      this.forceUpdate()
  }

  ...
  renderContent(){
      // your usual render code
      ...
  }

  renderLoading(){
      return <Icon type="spinner" spin />
  }

  render(){
      if(Store.isLoading()){
          return this.renderLoading()
      } else {
          return this.renderContent()
      }
  }
}