Как получить state из другого компонента в React.js?

Question

[waweca]

В общем есть два компонента.

var Comp1 = React.createClass({
  getInitialState: function() {
    return {
      data: []
    };
  },

  componentWillMount: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      type: 'GET',
      success: function(data) {
        this.setState({
          data: data
        });
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },

  render: function() {
    return (
        <div>
          {this.state.data}
        </div>
    );
  }
});

var Comp2 = React.createClass({
  render: function() {
    return (
        <div>
          {this.state.data} // ?
        </div>
    );
  }
});

Первый компонент делает/получает запрос.
Как во втором компоненте использовать данные полученные/вызванные первым компонентом?

Или правильно делать для каждого компонента свой запрос?

Answer 1

[Михаил Горячкин]

Если не придерживаться flux архитектуры то так:

var Comp1 = React.createClass({
//code
render: function() {
    return (
        <div>
         <Comp2 data={this.state.data} />
        </div>
    );
  }
});
var Comp2 = React.createClass({
  render: function() {
    return (
        var fromOne = this.props.data;
        <div>
          {fromOne}
        </div>
    );
  }
});

А если придерживаться flux-са то вам нужен Dispatcher и Store. При получение данных с сервера вы передаете данные в хранилище при помощи Dispatcher, после этого хранилище говорит что данные изменились, а в компонентах вы ставите прослушку на изменение данных. И как только произошло изменение, вы берете свежие данные из хранилища и уже делаете с ними что хотите.

Comments

[waweca]

Спасибо. Посмотрел flux. Попробовал, не смог. Слишком сложно для меня.

[waweca]

Даже не нашел простых примеров.

[7rulnik]

waweca: посмотрите на redux

[vaskadogana]

var fromOne = this.props.data;
каким образом происходит связь с первым компонентом.
Насколько я понял this.props.data; касается только этого компонента.

Answer 2

[vsuhachev]

Касаясь общего вопроса - компоненты для этого и сделали компонентами, чтобы инкапсулировать их поведение, иначе будет опять всеми любимый спагетти-код. Рекомендую все же потратить время на освоение flux, это однозначно нужная вещь. Можно начать с этой статьи. Ну и redux заслуживает внимания - это одна из реализаций концепции flux.

Comments

[waweca]

Спасибо. У меня попытка сделать SPA. Данные только приходят с сервера, на сервер ничего не отправляется. На текущий момент я пришел к тому, что два компонента делают свои запросы. Но вот появился третий, которому тоже надо получить свою порцию данных (не делать же еще запросы, ведь компонентов может быть много). Собственно я эту проблему задал в главном вопросе. Реально ли мне поможет flux архитектура упростить все это дело?

[vsuhachev]

waweca: да, реально. Оно именно для этого и придумано. Flux store это то место где хранятся данные внутри SPA. Т.е. вы вначале их туда подкачиваете по ajax а потом используете во всех компонентах в каких это нужно. Почитайте доку к redux, там все толково объяснено с примерами кода.