2015-12-27 3 views
0

Рассмотрите изоморфное приложение на основе Flux и с помощью библиотеки Fluxible для этого. У вас есть приложение электронной почты React, со списком сообщений слева и текущим открытым сообщением справа.Заполнение множества магазинов и ожиданий

Ваш маршрутизатор запускает действие «SHOW_POST», когда он вызывается с URL-адресом/сообщением/123, и действие загружает данные, обновляет хранилище, и, таким образом, сообщение появляется справа. Все это работает, обещание навигации разрешено и страница отображается.

Однако страница отображается без списка сообщений слева. Если действие на «LOAD_ALL_MESSAGES» вызывается во время SHOW_POST, они фактически не отображаются на сервере, сервер возвращает пустой список, и они загружаются через AJAX на клиенте.

Как заполнить другие магазины на странице, для которой требуются другие компоненты. Я попытался вызвать действия, чтобы заполнить их, когда компоненты, которые их требуют, отображаются, это кажется нечистым и не решает проблему того, что компонент не будет отображаться на стороне сервера.

Непонятно, что необходимо активировать дополнительные действия для заполнения магазинов во всех действиях навигации, поскольку магазины могут не понадобиться, код будет повторяющимся, так как мне нужно будет вызвать эти заполняющие действия почти из всех различных навигационных действий.

Какова предпочтительная архитектура для заполнения хранилищ фона во время рендеринга на стороне сервера. Запускать несколько действий из каждой навигации и ждать, пока все они будут решены?

ответ

0

Этот подход я следую,

  1. Метод таких маршрутов (требующих данные из нескольких магазинов) action выглядит следующим образом:

     
    action: function (context, payload, done) { 
        var getXData = new Promise(function(resolve){ 
        context.executeAction(getXDataAction, {}, resolve); 
        }); 
        var getYData = new Promise(function(resolve){ 
        context.executeAction(getYDataAction, {}, resolve); 
        }); 
        Promise.all([getXData, getYData]).then(function() { done() }); 
    }
  2. Внутри этих действий я проверить, если данные уже существуют в соответствующих магазинах, чтобы избежать их извлечения извне.

В качестве альтернативы, вы можете создать еще один action creator и просто переместить логику из маршрута к создателю действий. Я не вижу в этом реальной выгоды, кроме того, чтобы ваши маршруты были скудными.

+0

Это похоже на то, что я придумал. Я понял, что действие, запущенное маршрутизатором, после его разрешения завершает запрос, поэтому я поставил в очередь все необходимые действия в пределах, которые были завернуты в Promise.all(), как и у вас. Я написал некоторые вспомогательные функции, чтобы вызвать действия, которые будут заполнять все необходимые магазины. – simbolo

Смежные вопросы