Тема: React'а тред
Показать сообщение отдельно
  #129 (permalink)  
Старый 02.05.2015, 17:13
Аватар для Safort
Профессор
Отправить личное сообщение для Safort Посмотреть профиль Найти все сообщения от Safort
 
Регистрация: 23.12.2013
Сообщений: 1,856

Gozar,
Цитата:
Обычно ajax в componentDidMount.
Цитата:
А ещё нужно знать что можно вешать прослушку на изменение хранилища
Erolast,
Цитата:
Action.
Вот я накатал пример:
class MainComponent extends React.Component {
  constructor() {
    this.state = {
      listComponent: '' // дочерний компонент, содержащий какой-то список. Пустой потому, что пока ещё нет данных
    };
  }

  componentDidMount() {
    let _this = this;

    // подписываемся на изменения в хранилище
    AppStorage.on('change', this.update.bind(_this));

    // отправляем запрос на получение списка элементов
    fetch('./api/list')
    .then((res) => {
      res.json()
          .then((res) => {
            AppStorage.updateList(res); // обновляем хранилище и хранилище само вызывает метод update компонента MainComponent
          });
    });
  }

  update() {
    // обновляемся
    this.setState({
      listComponent: <ListComponent list={AppStorage.getList()}/>
    });
  }

  render() {
    return (
      <aside className="aside">
        {this.state.listComponent}
      </aside>
    );
  }
}



У меня, как вы видите, отсутствуют некоторые части Flux, а именно Dispatcher и ActionCreator. Можете пояснить зачем мне они тут нужны?
Набросал небольшое дополнение
AppDispatcher.register(function(data) {
  switch(data.eventName) {
    case 'update-list':
      AppStorage.updateList(data.params);
      break;
    case 'другое-событие':
      //..
  }
}

let ActionCreator = {
  updateList(data) {
    AppDispatcher.dispatch({
      eventName: 'update-list',
      list: data
    });
  };
};


Если я правильно понял, то преимущество Dispatcher'а в том, что в case'ах можно добавлять не один AppStorage.add(data.params), а множество обращений к хранилищу, так?
А ActionCreator это просто обёртка над методом dispatch() для краткости записи?

И ещё вопросец. Судя по этому комменту http://habrahabr.ru/post/249279/#comment_8255647 запросы к серверу лучше делать из ActionCreator'а или Storage. Можете показать на простом примере как вы это реализовываете(в т.ч. и инициализирующие запросы)?
Ответить с цитированием