React, Flux, React-Router Ошибка отправки - Возможно ли решение batchUpdates?

Question

Хорошо, поэтому я застрял в проблеме с реакцией, архитектурой потока и реактивным маршрутизатором. У меня есть следующие маршруты (только часть маршрутов):

<Route name="prepare-seniors"> 
    <Route name="senior" path=":candidateId" handler={SeniorCandidate}> 
    <DefaultRoute handler={SeniorProfile}/> 
    <Route name="senior-recommendations" path="recommends"> 
     <DefaultRoute handler={SeniorRecommends}/> 
     <Route name="senior-rec-new" path="new"/> 
    </Route> 
    </Route> 
</Route> 

Старший вид профиля делает вызов API для загрузки данных индивидуума. Когда вы переходите к представлению Рекомендует, идентификатор пользователя используется для выполнения другого вызова для загрузки рекомендаций. Он отлично работает, если я сначала просмотрю страницу профиля и перейду на страницу рекомендаций. Но если я жесткие перезагрузки я получаю:

Uncaught Error: Invariant Violation: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch. 

Я понимаю, что это происходит потому, что отправка становится вызываются после первого возвращения API, который выходит и начинает обновление компонентов. Перед тем, как он закончит, страница рекомендаций вызывает свой API и пытается отправить результаты. Я читал на форуме, что React.addons.batchUpdates - это способ исправить это, но я не мог понять, как заставить его работать. GitHub Batch Updates Issue и еще одна ссылка здесь, в которой обсуждается нечто подобное Trying to use waitFor. Первый рекомендует настроить диспетчер, добавив следующее:

// assuming a var `flux` containing your Flux instance... 
var oldDispatch = flux.dispatcher.dispatch.bind(flux.dispatcher); 
flux.dispatcher.dispatch = function(action) { 
    React.addons.batchedUpdates(function() { 
    oldDispatch(action); 
    }); 
}; 

Но я не мог выполнить эту работу. Может быть, я просто неправильно его внедряю.

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

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

О, так вот мой Dispatcher.js файл, так что вы можете увидеть, как это установить:

'use strict'; 

var flux = require('flux'), 
Dispatcher = require('flux').Dispatcher, 
React = require('react'), 
PayloadSources = require('../constants/PayloadSources'), 
assign = require('object-assign'); 

//var oldDispatcher = flux.Dispatcher.dispatch.bind(AppDispatcher); 
// 
//flux.dispatcher.dispatch = function(action) { 
// React.addons.batchedUpdates(function() { 
// oldDispatcher(action); 
// }); 
//}; 


var AppDispatcher = assign(new Dispatcher(), { 
    handleServerAction: function(action) { 
    var payload = { 
     source: PayloadSources.SERVER_ACTION, 
     action: action 
    }; 
    this.dispatch(payload); 
    }, 

    handleViewAction: function(action) { 
    if (!action.type) { 
     throw new Error('Empty action.type: you likely mistyped the action.'); 
    } 

    var payload = { 
     source: PayloadSources.VIEW_ACTION, 
     action: action 
    }; 
    this.dispatch(payload); 
    } 
}); 
module.exports = AppDispatcher; 

Answer 1

Ok первый я просто хочу сказать, что я учусь React и Flux в данный момент и не являюсь ни в означает эксперт. Однако я все равно дам ему выстрел:

Из того, что вы сказали, похоже, что вы активируете 2 асинхронных операции, а затем, когда они возвращаются, пытаясь отправить сообщения отправления. Проблема, возникающая из-за вызова отправки дважды запускается из двух независимых вызовов aync webservice.

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

Я думаю, что реальная проблема здесь возникает из того, как/когда эти действия запускаются (вы упомянули это кратко в конце вашего сообщения). Похоже, вы запускаете действия из компонента React Render (вроде как ленивая загрузка). Это почти точно то, что Flux пытается избежать, поскольку это шаблон, который может легко привести к бесконечному циклу или странным состояниям/шаблонам в потоке приложения.

Как вы упомянули в своем описании, вам, вероятно, придется запускать эту загрузку спереди, а не от отдельных компонентов, от небольшого числа, которое я знаю, я бы предложил, чтобы это было сделано до вызова React.render на ваш основной компонент.Если вы смотрите в приложении пример чата они делают подобную вещь в app.js:

ChatExampleData.init(); // load example data into localstorage 

ChatWebAPIUtils.getAllMessages(); 

React.render(
    <ChatApp />, 
    document.getElementById('react') 
); 

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

В качестве альтернативы, в зависимости от вашего технологического стека вы можете визуализировать первоначально на сервере (пример узла here .Net-версия на ReactJS.Net), поэтому у вас нет такой задержки, пока клиентская сторона загружается (также вы избегаете всех смешной бизнес с индексированием поисковой системы, если это вызывает беспокойство (BTW, я не пробовал ни одного из них, просто прочитал о них).