React'а тред
Думаю, можно создать отдельный тред для вопросов\трепни для этого чуда.
Мой первый вопрос - это "Как передавать состояние (или просто данные) компонентам React при серверной отрисовке?"
У меня на сайте 2 запроса делается постоянно - это список страниц (меню) и настройки сайта
пока решил сделать так, на примере страниц (это маршрут express):
var detectNotFound = function (state) {
var is404 = function (route) { return route.name == '404'; };
var isNotFound = state.routes.filter(is404).length > 0;
return isNotFound;
};
var getMarkup = function (req, data) {
return new Promise(function (res, rej) {
var location = req.url;
Router.run(routes, location, function (Handler, state) {
var isNotFound = detectNotFound(state);
if (isNotFound) {
rej();
} else {
var handler = React.createElement(Handler, {flux: flux, data: data});
var markup = React.renderToString(handler);
res(markup);
}
});
});
};
module.exports = function reactRoute_middleware (req, res, next) {
Promise
// Initial data
.resolve({})
.then(function (data) {
Page.findAll().then(function (pages) {
data.pages = _.map(pages, function (page) {
return { title: page.title, slug: page.slug };
});
return Promise.resolve(data);
})
.then(function (data) {
getMarkup(req, data).then(function (markup) {
res.render('index', { title: 'Сайтуха', content: markup, data: data });
}, next);
})
.catch(next);
});
};
ну и в шаблоне это дело вывожу:
Код:
extends layout
block content
div#content!= content
block scripts
- var strdata = JSON.stringify(data)
script window.initialData = !{strdata};
ну а дальше подхватываю window.initialData в компоненты\Flux
хотелось бы сделать это без глобальной переменной |