redux-preload
v0.0.5
Published
Preload actions on both server & client side (allows deep nesting of components)
Downloads
8
Readme
Preload
Description
Module is using to dispatch some actions (usually async data fetching) immediately after the rendering occurs. Works both on client and server sides.
Usage on client
import preload from 'redux-preload';
@preload([
// You can just pass a single action creator, or array of them
({ someProp }) => ({ type: 'FETCH', payload: someProp })
])
class Container extends Component {
render() {
return <div />;
}
}Usage on server
On server to get all goodness of isomorphic-deeply-nested-component-data-prefetch you need to call serverPreload(routerContext) with router context.
And also send preloaded data back to client using window.__INITIAL_STATE__ = ${serialize(store.getState())};
serverPreload is a promise - when promise resolves data is already fetched (store is polluted with data) and now you can render your DOM
Here is pseudo code that demonstrate that on server in render.js
import { serverPreload } from 'redux-preload';
const getRouterContext = function(store, renderProps) {
return (
<Provider store={store}>
<RouterContext {...renderProps} />
</Provider>
);
}
const renderHtml = (store, renderProps) => {
return '<!DOCTYPE html>' + ReactDOMServer.renderToStaticMarkup(
<html lang="en">
<body>
<div dangerouslySetInnerHTML={{__html: ReactDOMServer.renderToString(
getRouterContext(store, renderProps)
)}} id="app"></div>
<script dangerouslySetInnerHTML={{__html:`
window.__INITIAL_STATE__ = ${serialize(store.getState())};
`}}></script>
</body>
</html>
);
};
export default function render(req, res, next) {
const store = createStore(...);
...
match({routes, location}, async (error, redirectLocation, renderProps) => {
...
try {
await serverPreload(getRouterContext(store, renderProps));
const html = renderHtml(store, renderProps, req);
res.status(200).send(html);
} catch (exception) {
next(exception);
}
});
}Restore state sent from server
On client you need to revive state with data sent from server.
You can do it in main.js
const store = createStore({
initialState: window.__INITIAL_STATE__
});
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
{createRoutes(store.getState)}
</Router>
</Provider>,
document.getElementById('app')
);