Делаю приложение с универсальным/изоморфным рендерингом на React. Серверная часть понятна и работает: присылаем с backend'a какой-то json, синхронно помещаем его в store, а дальше ReactRouter выбирает нужный Route и рендерит правильный компонент, возвращая HTML в виде строки.
Непонятно, что делать с рендерингом в браузере.
Все компоненты требуют какие-то данные (props) чтобы отрендерится, но при этом реальные данные с сервера можно получить только асинхронно. Пока не придумал ничего умнее чем использовать onEnter в Route, но этот подход не работает:
window.onload = function() {
const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);
const store = createStoreWithMiddleware(viewPropsReducer);
ReactDOM.render(
<Provider store={store} >
<Router history={browserHistory} >
<Route path="/" component={ViewComposite}
onEnter={ ({params}) => {store.dispatch(fetchViewData()); }} />
<Route path='/admin' component={AdminComposite}
onEnter={ ({params}) => {store.dispatch(fetchAdminData()); }} />
</Router>
</Provider>,
document.getElementById('viewMount')
);
};
по причине того, что к тому моменту как promise из fetchViewData() отрезолится, рендеринг компонента уже успеет сфейлится по причине недостающих props.
В принципе, можно было бы браузерный рендеринг инициировать не в window.onload, а в then() promise'a, но тогда нужно будет дублировать логику из Router и для каждого базового компонента загружать свои данные. Или это как раз самый правильный способ?
