Ответ UI для async onEnter - реактивный маршрутизатор

Question

Я использую response-router v1.0.0-rc4.

Вот мои маршруты:

<Router> 
    <Route path="/" component={App}> 
     <Route path="info" component={Info} /> 
     <Route path="dashboard" onEnter={callAjax} component={Dashboard} /> 
    </Route> 
    </Router> 

Если изменение URL в/приборной панели, OnEnter будет называться, Ajax запрос будет отправить на сервер и около 1 второго времени отклика.

Итак, в течение 1 секунды пользовательский интерфейс не получил никакого ответа. Я хочу спросить, что я могу сделать для этого?

Что я пытаюсь сделать в компоненте панели мониторинга, я проверяю, что данные существуют или нет. Если не существует, я покажу, что в нем будет отображаться спина, иначе я покажу данные. Но проблема до завершения ajax, панель приборов не будет смонтирована.

Поэтому, пожалуйста, дайте некоторое предложение, спасибо.

Answer 1

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

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

Answer 2

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

так что вы должны очистить старые данные данных, когда вы назвали API, как ваш магазин должен быть

resetData:function() 
{ 
_data={}; 
} 

вы должны вызвать этот метод перед вызовом API