A server-side rendering helper for redux.
Simply a StoreEnhancer for redux that catches all promises from "dispatch" calls and stores them in "store.promises".
It also provides a function called renderAsync that awaits all promises before returning a final rendered version.
This is not an alternative to redux-promise and it does nothing on the client-side.
import {createStore} from 'redux';
import reducers from 'reducers';
export default function configureStore(initialState) {
const store = createStore(reducers, initialState);
return store;
}import {serverHelper} from 'redux-async-render';
import {createStore, compose} from 'redux';
import reducers from 'reducers';
const finalCreateStore = compose(
serverHelper
)(createStore);
export default function configureStore(initialState) {
const store = finalCreateStore(reducers, initialState);
return store;
}import {renderToString} from 'react-dom';
import {renderAsync} from 'redux-async-render';
import configureStore from './server-store';
const html = `
<html>
<head>
<title><!-- TITLE --></title>
</head>
<body>
<div id="root"><!-- CONTENT --></div>
</body>
<script>
window.initialStoreData = "-- STORES --";
</script>
<script src="/bundle.js"></script>
</html>
`;
export function express(req, res, next) {
const store = configureStore();
const renderFn = () => renderToString(<App store={store} />);
renderAsync(store, renderFn).then(rendered => {
const state = store.getState();
res.status(200).send(
html
.replace('<!-- CONTENT -->', rendered)
.replace('"-- STORES --"', JSON.stringify(state))
);
}).catch(next);
}- It's suggested that you use a custom ajax fetch function that calls the express server (or whatever you use) internally.
- Calling
ReactDOMServer.renderToStringwill only causecomponentWillMountto be called.componentDidMountwon't be called. Moreover,componentWillMountwill be called multiple times in each server-render so make sure you don't fetch data twice or you might be stuck in an infinite loop. This is a limitation ofReactDOMServerbut hopefully it will change in the future.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent