Skip to content

Instantly share code, notes, and snippets.

Jake Ginnivan JakeGinnivan

Block or report user

Report or block JakeGinnivan

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View react-ssr-component-data-load.jsx
class SomethingComponent extends React.Component {
componentWillMount() {
// If we don't have an article, load it
if (!this.props.article) {
this.props.dispatch(loadArticle(this.props.id))
}
}
render() {
if (this.props.loading) {
View react-ssr-transfer-state.js
`<script>window.data = ${serialize(store.getState())}</script>`
View react-ssr-resolve-all.js
// Note, doesn't deal with timeouts, infinite recursion, errors etc..
async function resolveAll(render, promiseTracker) {
const renderResult = render(promiseTracker)
if (promiseTracker.hasWork) {
await promiseTracker.waitForCompletion()
return resolveAll(render, promiseTracker)
}
return renderResult
}
View react-ssr-redux-action.js
{
type: 'MY_ACTION',
payload: {/* Data goes here */}
}
View react-ssr-assets.json
{
"main": {
"js": "/static/js/main_043b2e805d67f533bad6.js",
"css": "/static/css/main.1e87b891.css"
},
"vendor": {
"js": "/static/js/vendor_d4b74274cd66cdfe271f.js"
}
}
View react-ssr-data-load-function.js
function loadArticle(id) {
return async function(dispatch) {
// Dispatch an action indicating we have started loading
// When reduced, the state would likely indicate we
// are in a loading state
dispatch(startLoadArticle(id))
// Perform the load of the data
const loadedArticle = await api.loadArticle(id)
View react-ssr-redux-action-creator.js
function articleLoaded(id, article) {
return {
type: 'ARTICLE_LOADED',
payload: { id, article }
}
}
View react-ssr-render-html.js
import assets from '../assets.json'
function renderHtml(renderedMarkup: string) {
return `<!DOCTYPE html>
<html>
<head>
<link id="css-main" type="text/css" rel="stylesheet" href="${assets.main
.css}">
</head>
<body>
View react-ssr-thunk.js
function dispatch(action) {
// Promise tracker middleware
const nextAction = reduxThunkMiddleware(action)
// Because react-thunk returns the result of the
// thunk, our async function returns a promise
// Which means this statement will be true
if (Promise.resolve(nextAction) === nextAction) {
// Tracking a promise is a side effect of our middleware
track(nextAction)
View react-ssr-promise-tracker.js
export class PromiseTracker {
promises = []
track(promise) {
this.promises.push(promise)
}
middleware() {
return () => next => (action) => {
const result = next(action)
You can’t perform that action at this time.