Replace universal example with async-with-routing and async-universal

examples/universal-with-router/.babelrc

@@ -0,0 +1,3 @@
+{
+  presets: ["es2015", "react"]  
+}

examples/universal-with-router/client/index.js

@@ -0,0 +1,25 @@
+import 'babel-polyfill'
+import React from 'react'
+import { render } from 'react-dom'
+import { Provider } from 'react-redux'
+import { Router, browserHistory } from 'react-router'
+import { syncHistory } from 'react-router-redux'
+
+import configureStore from '../common/store/configureStore'
+import routes from '../common/routes'
+
+const initialState = window.__INITIAL_STATE__
+const reduxRouterMiddleware = syncHistory(browserHistory)
+const store = configureStore(initialState, [ reduxRouterMiddleware ])
+const rootElement = document.getElementById('app')
+
+reduxRouterMiddleware.listenForReplays(store)
+
+render(
+  <Provider store={store}>
+    <Router history={browserHistory}>
+      {routes}
+    </Router>
+  </Provider>,
+  rootElement
+)

examples/universal-with-router/common/actions/index.js

@@ -0,0 +1,42 @@
+export const SET_COUNTER = 'SET_COUNTER'
+export const INCREMENT_COUNTER = 'INCREMENT_COUNTER'
+export const DECREMENT_COUNTER = 'DECREMENT_COUNTER'
+
+export function set(value) {
+  return {
+    type: SET_COUNTER,
+    payload: value
+  }
+}
+
+export function increment() {
+  return {
+    type: INCREMENT_COUNTER
+  }
+}
+
+export function decrement() {
+  return {
+    type: DECREMENT_COUNTER
+  }
+}
+
+export function incrementIfOdd() {
+  return (dispatch, getState) => {
+    const { counter } = getState()
+
+    if (counter % 2 === 0) {
+      return
+    }
+
+    dispatch(increment())
+  }
+}
+
+export function incrementAsync(delay = 1000) {
+  return dispatch => {
+    setTimeout(() => {
+      dispatch(increment())
+    }, delay)
+  }
+}

examples/universal-with-router/common/api/counter.js

@@ -0,0 +1,13 @@
+function getRandomInt(min, max) {
+  return Math.floor(Math.random() * (max - min)) + min
+}
+
+export function fetchCounter(callback) {
+  // Rather than immediately returning, we delay our code with a timeout to simulate asynchronous behavior
+  setTimeout(() => {
+    callback(getRandomInt(1, 100))
+  }, 500)
+
+  // In the case of a real world API call, you'll normally run into a Promise like this:
+  // API.getUser().then(user => callback(user))
+}

examples/universal-with-router/common/components/Counter.js

@@ -0,0 +1,30 @@
+import React, { Component, PropTypes } from 'react'
+
+class Counter extends Component {
+  render() {
+    const { increment, incrementIfOdd, incrementAsync, decrement, counter } = this.props
+    return (
+      <p>
+        Clicked: {counter} times
+        {' '}
+        <button onClick={increment}>+</button>
+        {' '}
+        <button onClick={decrement}>-</button>
+        {' '}
+        <button onClick={incrementIfOdd}>Increment if odd</button>
+        {' '}
+        <button onClick={() => incrementAsync()}>Increment async</button>
+      </p>
+    )
+  }
+}
+
+Counter.propTypes = {
+  increment: PropTypes.func.isRequired,
+  incrementIfOdd: PropTypes.func.isRequired,
+  incrementAsync: PropTypes.func.isRequired,
+  decrement: PropTypes.func.isRequired,
+  counter: PropTypes.number.isRequired
+}
+
+export default Counter

examples/universal-with-router/common/components/Home.js

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class Home extends Component {
+  render() {
+    return (
+      <div>
+        <p>Home page</p>
+      </div>
+    )
+  }
+}

examples/universal-with-router/common/components/Layout.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router'
+
+export default class Layout extends Component {
+  render() {
+    return (
+      <div>
+        <nav>
+        <ul>
+          <li><Link to="/">Home</Link></li>
+          <li><Link to="/sample">Sample</Link></li>
+          <li><Link to="/counter">Counter</Link></li>
+        </ul>
+        </nav>
+        {this.props.children}
+      </div>
+    )
+  }
+}

examples/universal-with-router/common/components/Sample.js

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class Sample extends Component {
+  render() {
+    return (
+      <div>
+        <p>Sample</p>
+      </div>
+    )
+  }
+}

examples/universal-with-router/common/containers/Counter.js

@@ -0,0 +1,16 @@
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import Counter from '../components/Counter'
+import * as CounterActions from '../actions'
+
+function mapStateToProps(state) {
+  return {
+    counter: state.counter
+  }
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(CounterActions, dispatch)
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Counter)

examples/universal-with-router/common/reducers/counter.js

@@ -0,0 +1,14 @@
+import { SET_COUNTER, INCREMENT_COUNTER, DECREMENT_COUNTER } from '../actions'
+
+export default function counter(state = 0, action) {
+  switch (action.type) {
+    case SET_COUNTER:
+      return action.payload
+    case INCREMENT_COUNTER:
+      return state + 1
+    case DECREMENT_COUNTER:
+      return state - 1
+    default:
+      return state
+  }
+}

examples/universal-with-router/common/reducers/index.js

@@ -0,0 +1,10 @@
+import { combineReducers } from 'redux'
+import counter from './counter'
+import { routeReducer } from 'react-router-redux'
+
+const rootReducer = combineReducers({
+  routing: routeReducer,
+  counter
+})
+
+export default rootReducer

examples/universal-with-router/common/routes.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Route, IndexRoute } from 'react-router'
+
+import Layout from './components/Layout'
+import Home from './components/Home'
+import Sample from './components/Sample'
+import Counter from './containers/Counter'
+
+export default (
+      <Route path="/" component={Layout}>
+        <IndexRoute component={Home}/>
+        <Route path="sample" component={Sample}/>
+        <Route path="counter" component={Counter}/>
+      </Route>
+  )

examples/universal-with-router/common/store/configureStore.js

@@ -0,0 +1,24 @@
+import { createStore, applyMiddleware } from 'redux'
+import thunk from 'redux-thunk'
+import rootReducer from '../reducers'
+
+export default function configureStore(initialState, middlewares = []) {
+
+  middlewares = [ thunk, ...middlewares ]
+
+  const store = createStore(
+    rootReducer,
+    initialState,
+    applyMiddleware(...middlewares)
+  )
+
+  if (module.hot) {
+    // Enable Webpack hot module replacement for reducers
+    module.hot.accept('../reducers', () => {
+      const nextRootReducer = require('../reducers').default
+      store.replaceReducer(nextRootReducer)
+    })
+  }
+
+  return store
+}

examples/universal-with-router/index.js

@@ -0,0 +1 @@
+require('./client')

examples/universal-with-router/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "redux-universal-example",
+  "version": "0.0.0",
+  "description": "An example of a universally-rendered Redux application",
+  "scripts": {
+    "start": "node server/index.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/reactjs/redux.git"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/reactjs/redux/issues"
+  },
+  "homepage": "http://redux.js.org",
+  "dependencies": {
+    "babel-polyfill": "^6.3.14",
+    "babel-register": "^6.4.3",
+    "express": "^4.13.3",
+    "qs": "^4.0.0",
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7",
+    "react-redux": "^4.2.1",
+    "react-router": "^2.0.0",
+    "react-router-redux": "^3.0.0",
+    "redux": "^3.2.1",
+    "redux-thunk": "^1.0.3",
+    "serve-static": "^1.10.0"
+  },
+  "devDependencies": {
+    "babel-core": "^6.3.15",
+    "babel-loader": "^6.2.0",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
+    "babel-preset-react-hmre": "^1.0.1",
+    "babel-runtime": "^6.3.13",
+    "webpack": "^1.11.0",
+    "webpack-dev-middleware": "^1.4.0",
+    "webpack-hot-middleware": "^2.6.0"
+  }
+}

examples/universal-with-router/server/index.js

@@ -0,0 +1,2 @@
+require('babel-register')
+require('./server')