spee.ch/helpers/handleShowRender.jsx

69 lines
2 KiB
React
Raw Normal View History

import React from 'react';
import { renderToString } from 'react-dom/server';
import { createStore, applyMiddleware } from 'redux';
import Reducer from '../react/reducers';
import { Provider } from 'react-redux';
import { StaticRouter, matchPath } from 'react-router-dom';
import GAListener from '../react/components/GAListener';
import App from '../react/app';
import renderFullPage from './renderFullPage';
import routes from '../react/routes';
import createSagaMiddleware from 'redux-saga';
import rootSaga from '../react/sagas';
module.exports = (req, res) => {
let context = {};
// create and apply middleware
const sagaMiddleware = createSagaMiddleware();
const middleware = applyMiddleware(sagaMiddleware);
// create a new Redux store instance
const store = createStore(Reducer, middleware);
// run the saga middlweare
sagaMiddleware.run(rootSaga);
// get data as promises
const promises = [];
routes.some(route => {
const match = matchPath(req.path, route);
if (match) {
let fetchData = route.component.fetchData;
if (fetchData instanceof Function) {
promises.push(fetchData(store, match));
};
};
});
console.log('promises', promises);
// after promises have resolved, render the component
Promise.all(promises).then(data => {
console.log('data:', data);
// render component to a string
const html = renderToString(
<Provider store={store}>
<StaticRouter location={req.url} context={context}>
<GAListener>
<App />
</GAListener>
</StaticRouter>
</Provider>
);
// check for a redirect
if (context.url) {
console.log('REDIRECTING:', context.url);
return res.redirect(301, context.url);
} else {
console.log(`we're good, send the response`, html);
}
// get the initial state from our Redux store
const preloadedState = store.getState();
// send the rendered page back to the client
res.send(renderFullPage(html, preloadedState));
});
};