Merge pull request #1 from artsy/async_example

Add async example

Author: acjay

example/.babelrc

@@ -0,0 +1,16 @@
+{
+  "presets": ["react", "es2015"],
+  "env": {
+    "development": {
+      "plugins": [
+        ["react-transform", {
+          "transforms": [{
+            "transform": "react-transform-hmr",
+            "imports": ["react"],
+            "locals": ["module"]
+          }]
+        }]
+      ]
+    }
+  }
+}

example/actions/index.js

@@ -0,0 +1,34 @@
+export const REQUEST_POSTS = 'REQUEST_POSTS'
+export const RECEIVE_POSTS = 'RECEIVE_POSTS'
+export const SELECT_REDDIT = 'SELECT_REDDIT'
+export const INVALIDATE_REDDIT = 'INVALIDATE_REDDIT'
+
+export function selectReddit(reddit) {
+  return {
+    type: SELECT_REDDIT,
+    reddit
+  }
+}
+
+export function invalidateReddit(reddit) {
+  return {
+    type: INVALIDATE_REDDIT,
+    reddit
+  }
+}
+
+export function requestPosts(reddit) {
+  return {
+    type: REQUEST_POSTS,
+    reddit
+  }
+}
+
+export function receivePosts(reddit, posts) {
+  return {
+    type: RECEIVE_POSTS,
+    reddit,
+    posts,
+    receivedAt: Date.now()
+  }
+}

example/components/Layout.js

@@ -0,0 +1,43 @@
+import React, { PropTypes } from 'react'
+import Picker from '../components/Picker'
+import Posts from '../components/Posts'
+
+export default function Layout(_, { posts, isFetching, lastUpdated, onRefresh }) {
+  return (
+    <div>
+      <Picker options={[ 'reactjs', 'frontend' ]} />
+      <p>
+        {lastUpdated &&
+          <span>
+            Last updated at {new Date(lastUpdated).toLocaleTimeString()}.
+            {' '}
+          </span>
+        }
+        {!isFetching &&
+          <a href="#"
+             onClick={ e => { e.preventDefault(); onRefresh() } }>
+            Refresh
+          </a>
+        }
+      </p>
+      {isFetching && posts.length === 0 &&
+        <h2>Loading...</h2>
+      }
+      {!isFetching && posts.length === 0 &&
+        <h2>Empty.</h2>
+      }
+      {posts.length > 0 &&
+        <div style={{ opacity: isFetching ? 0.5 : 1 }}>
+          <Posts />
+        </div>
+      }
+    </div>
+  )
+}
+
+Layout.contextTypes = {
+  posts: PropTypes.array.isRequired,
+  isFetching: PropTypes.bool.isRequired,
+  lastUpdated: PropTypes.number,
+  onRefresh: PropTypes.func.isRequired
+}

example/components/Picker.js

@@ -0,0 +1,28 @@
+import React, { PropTypes } from 'react'
+
+export default function Picker({ options }, { selectedReddit, onSelectReddit }) {
+  return (
+    <span>
+      <h1>{ selectedReddit }</h1>
+      <select onChange={ e => onSelectReddit(e.target.value) }
+              value={ selectedReddit }>
+        { options.map(option =>
+          <option value={ option } key={ option }>
+            { option }
+          </option>)
+        }
+      </select>
+    </span>
+  )
+}
+
+Picker.propTypes = {
+  options: PropTypes.arrayOf(
+    PropTypes.string.isRequired
+  ).isRequired
+}
+
+Picker.contextTypes = {
+  selectedReddit: PropTypes.string.isRequired,
+  onSelectReddit: PropTypes.func.isRequired
+}

example/components/Posts.js

@@ -0,0 +1,15 @@
+import React, { PropTypes } from 'react'
+
+export default function Posts(_, { posts }) {
+  return (
+    <ul>
+      { posts.map((post, i) =>
+        <li key={ i }>{ post.title }</li>
+      )}
+    </ul>
+  )
+}
+
+Posts.contextTypes = {
+  posts: PropTypes.array.isRequired
+}

example/controllers/App.js

@@ -0,0 +1,53 @@
+import 'babel-polyfill'
+import fetch from 'isomorphic-fetch'
+import React, { Component, PropTypes } from 'react'
+import { controller, getProps } from 'react-redux-controller'
+import * as actions from '../actions'
+import * as selectors from '../selectors'
+import Layout from '../components/Layout'
+
+const controllerGenerators = {
+  *initialize() {
+    const { selectedReddit } = yield getProps
+
+    yield this.fetchPostsIfNeeded(selectedReddit)
+  },
+
+  *onSelectReddit(nextReddit) {
+    const { dispatch, selectedReddit } = yield getProps
+
+    dispatch(actions.selectReddit(nextReddit))
+
+    if (nextReddit !== selectedReddit) {
+      yield this.fetchPostsIfNeeded(nextReddit)
+    }
+  },
+
+  *onRefresh() {
+    const { dispatch, selectedReddit } = yield getProps
+
+    dispatch(actions.invalidateReddit(selectedReddit))
+    yield this.fetchPostsIfNeeded(selectedReddit)
+  },
+
+  *fetchPostsIfNeeded(reddit) {
+    const { postsByReddit } = yield getProps
+
+    const posts = postsByReddit[reddit]
+    if (!posts || !posts.isFetching || posts.didInvalidate) {
+      yield this.fetchPosts(reddit)
+    }
+  },
+
+  *fetchPosts(reddit) {
+    const { dispatch } = yield getProps
+
+    dispatch(actions.requestPosts(reddit))
+    const response = yield fetch(`http://www.reddit.com/r/${reddit}.json`)
+    const responseJson = yield response.json()
+    const newPosts = responseJson.data.children.map(child => child.data)
+    dispatch(actions.receivePosts(reddit, newPosts))
+  }
+}
+
+export default controller(Layout, controllerGenerators, selectors)

example/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Redux async example</title>
+  </head>
+  <body>
+    <div id="root">
+    </div>
+    <script src="/static/bundle.js"></script>
+  </body>
+</html>

example/index.js

@@ -0,0 +1,15 @@
+import 'babel-polyfill'
+import React from 'react'
+import { render } from 'react-dom'
+import { Provider } from 'react-redux'
+import App from './controllers/App'
+import configureStore from './store/configureStore'
+
+const store = configureStore()
+
+render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById('root')
+)

example/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "redux-async-example",
+  "version": "0.0.0",
+  "description": "Redux async example",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rackt/redux.git"
+  },
+  "keywords": [
+    "react",
+    "reactjs",
+    "hot",
+    "reload",
+    "hmr",
+    "live",
+    "edit",
+    "webpack",
+    "flux"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/rackt/redux/issues"
+  },
+  "homepage": "http://rackt.github.io/redux",
+  "dependencies": {
+    "isomorphic-fetch": "^2.1.1",
+    "react": "^0.14.0",
+    "react-dom": "^0.14.0",
+    "react-redux": "^4.0.0",
+    "react-redux-controller": "^0.1.1",
+    "redux": "^3.0.0",
+    "redux-logger": "^2.0.2",
+    "redux-thunk": "^0.1.0"
+  },
+  "devDependencies": {
+    "babel-core": "^6.3.21",
+    "babel-loader": "^6.2.0",
+    "babel-plugin-react-transform": "^2.0.0-beta1",
+    "babel-polyfill": "^6.3.14",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
+    "expect": "^1.6.0",
+    "express": "^4.13.3",
+    "node-libs-browser": "^0.5.2",
+    "react-transform-hmr": "^1.0.0",
+    "webpack": "^1.11.0",
+    "webpack-dev-middleware": "^1.2.0",
+    "webpack-hot-middleware": "^2.2.0"
+  }
+}

example/reducers/index.js

@@ -0,0 +1,61 @@
+import { combineReducers } from 'redux'
+import {
+  SELECT_REDDIT, INVALIDATE_REDDIT,
+  REQUEST_POSTS, RECEIVE_POSTS
+} from '../actions'
+
+function selectedReddit(state = 'reactjs', action) {
+  switch (action.type) {
+    case SELECT_REDDIT:
+      return action.reddit
+    default:
+      return state
+  }
+}
+
+function posts(state = {
+  isFetching: false,
+  didInvalidate: false,
+  items: []
+}, action) {
+  switch (action.type) {
+    case INVALIDATE_REDDIT:
+      return Object.assign({}, state, {
+        didInvalidate: true
+      })
+    case REQUEST_POSTS:
+      return Object.assign({}, state, {
+        isFetching: true,
+        didInvalidate: false
+      })
+    case RECEIVE_POSTS:
+      return Object.assign({}, state, {
+        isFetching: false,
+        didInvalidate: false,
+        items: action.posts,
+        lastUpdated: action.receivedAt
+      })
+    default:
+      return state
+  }
+}
+
+function postsByReddit(state = { }, action) {
+  switch (action.type) {
+    case INVALIDATE_REDDIT:
+    case RECEIVE_POSTS:
+    case REQUEST_POSTS:
+      return Object.assign({}, state, {
+        [action.reddit]: posts(state[action.reddit], action)
+      })
+    default:
+      return state
+  }
+}
+
+const rootReducer = combineReducers({
+  postsByReddit,
+  selectedReddit
+})
+
+export default rootReducer