faceyspacey

const app = express()

const multiCompiler = webpack([clientConfig, serverConfig])
const clientCompiler = multiCompiler.compilers[0]

app.use(webpackDevMiddleware(multiCompiler, { publicPath }))
app.use(webpackHotMiddleware(clientCompiler))
app.use(webpackHotServerMiddleware(multiCompiler)
        
app.listen(3000, () => console.log('READY'))

faceyspacey

// client
const webpack = require('webpack')
const path = require('path')

module.exports = {
  name: 'client',
  entry: [
    path.resolve(__dirname, '../src/index.js')
  ],
  output: {

faceyspacey

import React from 'react'
import ReactDOM from 'react-dom/server'
import { Provider } from 'react-redux'

import configureStore from './configureStore'
import App from '../src/components/App'

export default () => async (req, res, next) => {
  const store = await configureStore(req, res)
  

faceyspacey

import createHistory from 'history/createMemoryHistory'
import configureStore from '../src/configureStore'

export default async (req, res) => {
  const history = createHistory({ initialEntries: [req.path] })
  const { store, thunk } = configureStore(history)
  
  await thunk(store) // THE PAYOFF!

  const status = store.getState().location.type === NOT_FOUND ? 404 : 200

faceyspacey

import { createStore, applyMiddleware, compose, combineReducers } from 'redux'
import { connectRoutes } from 'redux-first-router'

import routesMap from './routesMap'
import options from './options'
import * as reducers from './reducers'

export default (history, preLoadedState) => {
  const { reducer, middleware, enhancer, thunk } = connectRoutes(
    history,

faceyspacey

const routesMap = {
  HOME: '/',
  LIST: {
    path: '/list/:category',
    thunk: async (dispatch, getState) => {
      const { payload: { category } } = getState().location
      const videos = await fetchData(`/api/videos/${category}`)
      
      dispatch({ type: 'VIDEOS_FETCHED', payload: { videos, category } })
    }

faceyspacey

import createHistory from 'history/createMemoryHistory'
import { NOT_FOUND } from 'redux-first-router'
import configureStore from '../src/configureStore'

export default async (req, res) => {
  const history = createHistory({ initialEntries: [req.path] })
  const { store, thunk } = configureStore(history)
  
  await thunk(store) // THE PAYOFF!

faceyspacey

export default () => async (req, res, next) => {
  const store = await configureStore(req, res)
  if (!store) return
  
  const app = <Provider store={store}><App /></Provider>
  ...

faceyspacey

import { redirect } from 'redux-first-router'
import { isAllowed } from './utils'

const options = {
  onBeforeChange: (dispatch, getState, action) => {
    const allowed = isAllowed(action.type, getState())

    if (!allowed) {
      const action = redirect({ type: 'LOGIN' })
      dispatch(action)

faceyspacey

import createHistory from 'history/createMemoryHistory'
import { NOT_FOUND } from 'redux-first-router'
import configureStore from '../src/configureStore'

export default async (req, res) => {
  const history = createHistory({ initialEntries: [req.path] })
  const { store, thunk } = configureStore(history)
  
  let location = store.getState().location
  if (doesRedirect(location, res)) return false