EDIT:
сделал
boilerplate
---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
React,
Fluxxor,
react-router,
flowtype,
webpack,
babeljs,
axios
структура:
--app/
----actions/
------index.js
------Article.js
----api/
------index.js
------Article.js
----stores/
------index.js
------Article.js
----pages/
------ArticlePage.js
------ArticlePage.less
----components/
------MyComponent.js
------MyComponent.less
----main.js
----router.js
----EventConstants.js
pages/ArticlePage.js:
var React = require("react/addons");
var Fluxxor = require("fluxxor");
require("./ArticlePage.less");
var ArticlePage = React.createClass({
// Компоненты подписываются на изменения в store
mixins: [
Fluxxor.FluxMixin(React),
Fluxxor.StoreWatchMixin("article")
],
getStateFromFlux() {
// достаем данные из store
return {
articles: this.getFlux().store("article").getArticles()
};
},
componentWillMount() {
// вызываем action
this.getFlux().article.fetch();
},
render() {
// render articles
}
});
module.exports = ArticlePage;
action/Article.js:
var EC = require("../EventConstants");
var api = require("../api/");
module.exports = {
fetch() {
// в api делаем сам запрос к серверу
return api.article
.fetch()
.then(data => {
this.dispatch(EC.SERVER.RECEIVE_ARTICLES, data.articles);
return data.articles;
});
}
};
store/Article.js:
var Fluxxor = require("fluxxor");
var EC = require("../EventConstants");
var ArticleStore = Fluxxor.createStore({
initialize() {
this._articles = [];
this.bindActions(
// подписываемся на событие
EC.SERVER.RECEIVE_ARTICLES, this.handleReceive
);
},
/*========== Getters ==========*/
getArticles() {
return JSON.parse(JSON.stringify(this._articles));
},
/*========== handlers ==========*/
handleReceive(user) {
this._articles = user.addresses;
// Все компоненты которые подписаны на store будут уведомлены
// в них также визовется getStateFromFlux
this.emit("change");
},
});
module.exports = ArticleStore;
EventConstants.js:
module.exports = {
UI: {
// тут ивенты которые не обращаются к серверу
},
SERVER: {
RECEIVE_ARTICLES: "SERVER:RECEIVE_ARTICLES",
}
};