Redux Async Render
A server-side rendering helper for redux.
So what's this?
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.
Example Usage
store.js
;; { const store = ; return store;}
server-store.js
;;; const finalCreateStore = createStore; { const store = ; return store;}
server-render.jsx
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>`; { const store = ; const renderFn = ; ;}
Notes
- It's suggested that you use a custom ajax fetch function that calls the express server (or whatever you use) internally.
Known issues
- Calling
ReactDOMServer.renderToString
will only causecomponentWillMount
to be called.componentDidMount
won't be called. Moreover,componentWillMount
will 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 ofReactDOMServer
but hopefully it will change in the future.