(WIP) Update examples

examples/async-universal/.babelrc

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

examples/async-universal/client/index.js

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

examples/async/actions/index.js → examples/async-universal/common/actions/index.js

@@ -29,7 +29,7 @@ function requestPosts(reddit) {
 function receivePosts(reddit, json) {
   return {
     type: RECEIVE_POSTS,
-    reddit,
+    reddit: reddit,
     posts: json.data.children.map(child => child.data),
     receivedAt: Date.now()
   }

examples/async-universal/common/components/App.js

@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+
+export default class App extends Component {
+  render() {
+    return (
+      <div>
+        <div>
+          <h3>Redux async universal example</h3>
+          <p>Code on <a href="https://github.com/reactjs/redux">Github</a></p>
+          <hr/>
+        </div>
+        {this.props.children}
+      </div>
+    )
+  }
+}

examples/async/components/Picker.js → examples/async-universal/common/components/Picker.js

@@ -6,7 +6,7 @@ export default class Picker extends Component {
 
     return (
       <span>
-        <h1>{value}</h1>
+        <h1>{(value) ? value : 'Select a subreddit below'}</h1>
         <select onChange={e => onChange(e.target.value)}
                 value={value}>
           {options.map(option =>

examples/async-universal/common/containers/Reddit.js

@@ -0,0 +1,115 @@
+import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { selectReddit, fetchPostsIfNeeded, invalidateReddit } from '../actions'
+import Picker from '../components/Picker'
+import Posts from '../components/Posts'
+
+class Reddit extends Component {
+
+  constructor(props) {
+    super(props)
+    this.handleChange = this.handleChange.bind(this)
+    this.handleRefreshClick = this.handleRefreshClick.bind(this)
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { dispatch, params } = this.props
+
+    if (nextProps.params.id !== params.id) {
+      dispatch(selectReddit(nextProps.params.id))
+      if (nextProps.params.id) {
+        dispatch(fetchPostsIfNeeded(nextProps.params.id))
+      }
+    }
+
+  }
+
+  handleChange(nextReddit) {
+    this.context.router.push(`/${nextReddit}`)
+  }
+
+  handleRefreshClick(e) {
+    e.preventDefault()
+
+    const { dispatch, selectedReddit } = this.props
+    dispatch(invalidateReddit(selectedReddit))
+    dispatch(fetchPostsIfNeeded(selectedReddit))
+  }
+
+  render() {
+    const { selectedReddit, posts, isFetching, lastUpdated } = this.props
+    const isEmpty = posts.length === 0
+    return (
+      <div>
+        <Picker value={selectedReddit}
+                onChange={this.handleChange}
+                options={ [ '', 'reactjs', 'frontend' ] } />
+        <p>
+          {lastUpdated &&
+            <span>
+            Last updated at {new Date(lastUpdated).toLocaleTimeString()}.
+            {' '}
+            </span>
+          }
+          {!isFetching && selectedReddit &&
+            <a href="#"
+               onClick={this.handleRefreshClick}>
+              Refresh
+            </a>
+          }
+        </p>
+        {isEmpty
+          ? (isFetching ? <h2>Loading...</h2> : <h2>Empty.</h2>)
+          : <div style={{ opacity: isFetching ? 0.5 : 1 }}>
+              <Posts posts={posts}/>
+            </div>
+        }
+      </div>
+    )
+  }
+}
+
+Reddit.fetchData = (dispatch, params) => {
+  const subreddit = params.id
+  if (subreddit) {
+    return Promise.all([
+      dispatch(selectReddit(subreddit)),
+      dispatch(fetchPostsIfNeeded(subreddit))
+    ])
+  } else {
+    return Promise.resolve()
+  }
+}
+
+Reddit.contextTypes = {
+  router: PropTypes.object
+}
+
+Reddit.propTypes = {
+  selectedReddit: PropTypes.string.isRequired,
+  posts: PropTypes.array.isRequired,
+  isFetching: PropTypes.bool.isRequired,
+  lastUpdated: PropTypes.number,
+  dispatch: PropTypes.func.isRequired
+}
+
+function mapStateToProps(state) {
+  const { selectedReddit, postsByReddit } = state
+  const {
+    isFetching,
+    lastUpdated,
+    items: posts
+  } = postsByReddit[selectedReddit] || {
+    isFetching: false,
+    items: []
+  }
+
+  return {
+    selectedReddit,
+    posts,
+    isFetching,
+    lastUpdated
+  }
+}
+
+export default connect(mapStateToProps)(Reddit)

examples/async/reducers/index.js → examples/async-universal/common/reducers/index.js

@@ -4,10 +4,10 @@ import {
   REQUEST_POSTS, RECEIVE_POSTS
 } from '../actions'
 
-function selectedReddit(state = 'reactjs', action) {
+function selectedReddit(state = '', action) {
   switch (action.type) {
     case SELECT_REDDIT:
-      return action.reddit
+      return action.reddit || ''
     default:
       return state
   }

examples/async-universal/common/routes.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import Route from 'react-router/lib/Route'
+import IndexRoute from 'react-router/lib/IndexRoute'
+
+import App from './components/App'
+import Reddit from './containers/Reddit'
+
+export default (
+  <Route path="/" component={App}>
+    <IndexRoute component={Reddit}/>
+    <Route path=":id" component={Reddit}/>
+  </Route>
+)

examples/async/store/configureStore.js → examples/async-universal/common/store/configureStore.js

@@ -3,10 +3,10 @@ import thunkMiddleware from 'redux-thunk'
 import createLogger from 'redux-logger'
 import rootReducer from '../reducers'
 
-export default function configureStore(preloadedState) {
+export default function configureStore(initialState) {
   const store = createStore(
     rootReducer,
-    preloadedState,
+    initialState,
     applyMiddleware(thunkMiddleware, createLogger())
   )
 

examples/async-universal/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "redux-async-universal-example",
+  "version": "0.0.0",
+  "description": "Redux async universal example",
+  "scripts": {
+    "start": "node server/index.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/reactjs/redux.git"
+  },
+  "keywords": [
+    "react",
+    "reactjs",
+    "hot",
+    "reload",
+    "hmr",
+    "live",
+    "edit",
+    "webpack",
+    "flux"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/reactjs/redux/issues"
+  },
+  "homepage": "http://redux.js.org",
+  "dependencies": {
+    "babel-polyfill": "^6.3.14",
+    "express": "^4.13.4",
+    "isomorphic-fetch": "^2.1.1",
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7",
+    "react-redux": "^4.2.1",
+    "react-router": "^2.0.0",
+    "redux": "^3.2.1",
+    "redux-logger": "^2.4.0",
+    "redux-thunk": "^1.0.3"
+  },
+  "devDependencies": {
+    "babel-core": "^6.3.15",
+    "babel-loader": "^6.2.0",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
+    "expect": "^1.6.0",
+    "node-libs-browser": "^0.5.2",
+    "react-transform-hmr": "^1.0.4",
+    "webpack": "^1.9.11",
+    "webpack-dev-middleware": "^1.2.0",
+    "webpack-hot-middleware": "^2.2.0"
+  }
+}

examples/async-universal/server/index.js

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

examples/async-universal/server/server.js

@@ -0,0 +1,80 @@
+var webpack = require('webpack')
+var webpackDevMiddleware = require('webpack-dev-middleware')
+var webpackHotMiddleware = require('webpack-hot-middleware')
+var config = require('../webpack.config')
+var React = require('react')
+var renderToString = require('react-dom/server').renderToString
+var Provider = require('react-redux').Provider
+var match = require('react-router/lib/match')
+var RouterContext = require('react-router/lib/RouterContext')
+
+var configureStore = require('../common/store/configureStore').default
+var routes = require('../common/routes').default
+
+var app = new (require('express'))()
+var port = 3000
+
+var compiler = webpack(config)
+app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }))
+app.use(webpackHotMiddleware(compiler))
+
+app.use(handleRender)
+
+function handleRender(req, res) {
+  match({ routes, location: req.url }, function(error, redirectLocation, renderProps) {
+    if (error) {
+      res.status(500).send(error.message)
+    } else if (redirectLocation) {
+      res.redirect(302, redirectLocation.pathname + redirectLocation.search)
+    } else if (renderProps) {
+      // Create a new Redux store instance
+      var store = configureStore()
+
+      // Grab static fetchData
+      var fetchData = renderProps.components[ renderProps.components.length - 1 ].fetchData
+
+      // Query our API asynchronously
+      fetchData(store.dispatch, renderProps.params).then(() => {
+
+        const html = renderToString(
+          <Provider store={store}>
+            <RouterContext { ...renderProps} />
+          </Provider>
+        )
+
+        var finalState = store.getState()
+
+        res.status(200).send(renderFullPage(html, finalState))
+      })
+
+    } else {
+      res.status(404).send('Not found')
+    }
+  })
+}
+
+function renderFullPage(html, initialState) {
+  return `
+    <!doctype html>
+    <html>
+      <head>
+        <title>Redux Async Universal Example</title>
+      </head>
+      <body>
+        <div id="app">${html}</div>
+        <script>
+          window.__INITIAL_STATE__ = ${JSON.stringify(initialState)}
+        </script>
+        <script src="/static/bundle.js"></script>
+      </body>
+    </html>
+    `
+}
+
+app.listen(port, function(error) {
+  if (error) {
+    console.error(error)
+  } else {
+    console.info("==> 🌎  Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port)
+  }
+})

examples/counter/webpack.config.js → examples/async-universal/webpack.config.js

@@ -5,25 +5,25 @@ module.exports = {
   devtool: 'cheap-module-eval-source-map',
   entry: [
     'webpack-hot-middleware/client',
-    './index'
+    './client/index.js'
   ],
   output: {
     path: path.join(__dirname, 'dist'),
     filename: 'bundle.js',
     publicPath: '/static/'
   },
   plugins: [
-    new webpack.optimize.OccurrenceOrderPlugin(),
+    new webpack.optimize.OccurenceOrderPlugin(),
     new webpack.HotModuleReplacementPlugin()
   ],
   module: {
     loaders: [
       {
         test: /\.js$/,
-        loaders: [ 'babel' ],
+        loaders: ['babel'],
         exclude: /node_modules/,
         include: __dirname
       }
     ]
   }
-}
+}

examples/async-with-routing/.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["es2015", "react"],
+  "env": {
+    "development": {
+      "presets": ["react-hmre"]
+    }
+  }
+}