Gozar,
Цитата:
Обычно ajax в componentDidMount.
|
Цитата:
А ещё нужно знать что можно вешать прослушку на изменение хранилища
|
Erolast,
Вот я накатал пример:
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. Можете показать на простом примере как вы это реализовываете(в т.ч. и инициализирующие запросы)?
|