modify example to use react-redux-controller

Author: acjay

example/.babelrc

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

example/actions/index.js

@@ -1,5 +1,3 @@
-import fetch from 'isomorphic-fetch'
-
 export const REQUEST_POSTS = 'REQUEST_POSTS'
 export const RECEIVE_POSTS = 'RECEIVE_POSTS'
 export const SELECT_REDDIT = 'SELECT_REDDIT'
@@ -19,46 +17,18 @@ export function invalidateReddit(reddit) {
   }
 }
 
-function requestPosts(reddit) {
+export function requestPosts(reddit) {
   return {
     type: REQUEST_POSTS,
     reddit
   }
 }
 
-function receivePosts(reddit, json) {
+export function receivePosts(reddit, posts) {
   return {
     type: RECEIVE_POSTS,
-    reddit: reddit,
-    posts: json.data.children.map(child => child.data),
+    reddit,
+    posts,
     receivedAt: Date.now()
   }
 }
-
-function fetchPosts(reddit) {
-  return dispatch => {
-    dispatch(requestPosts(reddit))
-    return fetch(`http://www.reddit.com/r/${reddit}.json`)
-      .then(response => response.json())
-      .then(json => dispatch(receivePosts(reddit, json)))
-  }
-}
-
-function shouldFetchPosts(state, reddit) {
-  const posts = state.postsByReddit[reddit]
-  if (!posts) {
-    return true
-  }
-  if (posts.isFetching) {
-    return false
-  }
-  return posts.didInvalidate
-}
-
-export function fetchPostsIfNeeded(reddit) {
-  return (dispatch, getState) => {
-    if (shouldFetchPosts(getState(), reddit)) {
-      return dispatch(fetchPosts(reddit))
-    }
-  }
-}

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

@@ -1,29 +1,28 @@
-import React, { Component, PropTypes } from 'react'
+import React, { PropTypes } from 'react'
 
-export default class Picker extends Component {
-  render() {
-    const { value, onChange, options } = this.props
-
-    return (
-      <span>
-        <h1>{value}</h1>
-        <select onChange={e => onChange(e.target.value)}
-                value={value}>
-          {options.map(option =>
-            <option value={option} key={option}>
-              {option}
-            </option>)
-          }
-        </select>
-      </span>
-    )
-  }
+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,
-  value: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired
+  ).isRequired
+}
+
+Picker.contextTypes = {
+  selectedReddit: PropTypes.string.isRequired,
+  onSelectReddit: PropTypes.func.isRequired
 }

example/components/Posts.js

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

example/containers/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/controllers/App.js

@@ -1,8 +1,8 @@
-import 'babel-core/polyfill'
+import 'babel-polyfill'
 import React from 'react'
 import { render } from 'react-dom'
 import { Provider } from 'react-redux'
-import App from './containers/App'
+import App from './controllers/App'
 import configureStore from './store/configureStore'
 
 const store = configureStore()