Тема: React'а тред
Показать сообщение отдельно
  #1 (permalink)  
Старый 22.02.2015, 22:46
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

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

хотелось бы сделать это без глобальной переменной
Ответить с цитированием