Merge pull request #29 from EvanOxfeld/port-async-example

Port redux project async example to ng-redux

Author: wbuchwalter

examples/async/actions/asyncService.js

@@ -0,0 +1,67 @@
+import * as types from '../constants/ActionTypes';
+
+function selectReddit(reddit) {
+  return {
+    type: types.SELECT_REDDIT,
+    reddit
+  };
+}
+
+function invalidateReddit(reddit) {
+  return {
+    type: types.INVALIDATE_REDDIT,
+    reddit
+  };
+}
+
+function requestPosts(reddit) {
+  return {
+    type: types.REQUEST_POSTS,
+    reddit
+  };
+}
+
+function receivePosts(reddit, json) {
+  return {
+    type: types.RECEIVE_POSTS,
+    reddit: reddit,
+    posts: json.data.children.map(child => child.data),
+    receivedAt: Date.now()
+  };
+}
+
+export default function asyncService($http) {
+  function fetchPosts(reddit) {
+    return dispatch => {
+      dispatch(requestPosts(reddit));
+      return $http.get(`http://www.reddit.com/r/${reddit}.json`)
+        .then(response => response.data)
+        .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;
+  }
+
+  function fetchPostsIfNeeded(reddit) {
+    return (dispatch, getState) => {
+      if (shouldFetchPosts(getState(), reddit)) {
+        return dispatch(fetchPosts(reddit));
+      }
+    };
+  }
+
+  return {
+    selectReddit,
+    invalidateReddit,
+    fetchPostsIfNeeded
+  };
+}

examples/async/components/picker.html

@@ -0,0 +1,7 @@
+<span>
+  <h1>{{picker.value}}</h1>
+  <select ng-options="option for option in picker.options"
+    ng-model="picker.value"
+    ng-change="picker.onChange(picker.value)">
+  </select>
+</span>

examples/async/components/picker.js

@@ -0,0 +1,17 @@
+export default function picker() {
+  return {
+    restrict: 'E',
+    controllerAs: 'picker',
+    controller: PickerController,
+    template: require('./picker.html'),
+    scope: {
+      options: '=',
+      value: '=',
+      onChange: '='
+    },
+    bindToController: true
+  };
+}
+
+class PickerController {
+}

examples/async/components/posts.html

@@ -0,0 +1,3 @@
+<ul>
+  <li ng-repeat="post in posts.posts">{{post.title}}</li>
+</ul>

examples/async/components/posts.js

@@ -0,0 +1,15 @@
+export default function posts() {
+  return {
+    restrict: 'E',
+    controllerAs: 'posts',
+    controller: PostsController,
+    template: require('./posts.html'),
+    scope: {
+      posts: '=',
+    },
+    bindToController: true
+  };
+}
+
+class PostsController {
+}

examples/async/constants/ActionTypes.js

@@ -0,0 +1,4 @@
+export const REQUEST_POSTS = 'REQUEST_POSTS';
+export const RECEIVE_POSTS = 'RECEIVE_POSTS';
+export const SELECT_REDDIT = 'SELECT_REDDIT';
+export const INVALIDATE_REDDIT = 'INVALIDATE_REDDIT';

examples/async/containers/app.html

@@ -0,0 +1,22 @@
+<div>
+  <ngr-picker value="app.selectedReddit"
+          on-change="app.handleChange"
+          options="app.options">
+  </ngr-picker>
+  <p>
+    <span ng-show="app.lastUpdated">
+      Last updated at {{ app.lastUpdated | date:'mediumTime' }}.
+    </span>
+    <a href="#"
+      ng-show="!app.isFetching"
+      ng-click="app.handleRefreshClick()">
+      Refresh
+    </a>
+  </p>
+  <h2 ng-show="app.isFetching && app.posts.length === 0">Loading...</h2>
+  <h2 ng-show="!app.isFetching && app.posts.length === 0">Empty.</h2>
+  <div ng-show="app.posts.length > 0"
+    ng-style="{ opacity: app.isFetching ? 0.5 : 1 }">
+    <ngr-posts posts="app.posts"></ngr-posts>
+  </div>
+</div>

examples/async/containers/app.js

@@ -0,0 +1,59 @@
+export default function app() {
+  return {
+    restrict: 'E',
+    controllerAs: 'app',
+    controller: AppController,
+    template: require('./app.html'),
+    scope: {}
+  };
+}
+
+class AppController {
+
+  constructor($ngRedux, $scope, AsyncActions) {
+    const unsubscribe = $ngRedux.connect(this.mapStateToThis, AsyncActions)((selectedState, actions) => {
+      this.componentWillReceiveStateAndActions(selectedState, actions);
+      Object.assign(this, selectedState, actions);
+    });
+    this.options = ['angularjs', 'frontend'];
+    this.handleChange = this.handleChange.bind(this);
+    this.handleRefreshClick = this.handleRefreshClick.bind(this);
+
+    this.fetchPostsIfNeeded(this.selectedReddit);
+  }
+
+  componentWillReceiveStateAndActions(nextState, nextActions) {
+    if (nextState.selectedReddit !== this.selectedReddit) {
+      nextActions.fetchPostsIfNeeded(nextState.selectedReddit);
+    }
+  }
+
+  handleChange(nextReddit) {
+    this.selectReddit(nextReddit);
+  }
+
+  handleRefreshClick() {
+    this.invalidateReddit(this.selectedReddit);
+    this.fetchPostsIfNeeded(this.selectedReddit);
+  }
+
+  // Which part of the Redux global state does our component want to receive?
+  mapStateToThis(state) {
+    const { selectedReddit, postsByReddit } = state;
+    const {
+      isFetching,
+      lastUpdated,
+      items: posts
+    } = postsByReddit[selectedReddit] || {
+      isFetching: true,
+      items: []
+    };
+
+    return {
+      selectedReddit,
+      posts,
+      isFetching,
+      lastUpdated
+    };
+  }
+}

examples/async/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
+    <title>{%= o.htmlWebpackPlugin.options.title %}</title>
+  </head>
+  <body>
+    <div ng-app="async">
+      <ngr-async></ngr-async>
+    </div>
+  </body>
+</html>

examples/async/index.js

@@ -0,0 +1,19 @@
+import 'babel-core/polyfill';
+import angular from 'angular';
+import ngRedux from 'ng-redux';
+import thunk from 'redux-thunk';
+import createLogger from 'redux-logger';
+import rootReducer from './reducers';
+import asyncService from './actions/asyncService';
+import app from './containers/app';
+import picker from './components/picker';
+import posts from './components/posts';
+
+angular.module('async', [ngRedux])
+  .config(($ngReduxProvider) => {
+    $ngReduxProvider.createStoreWith(rootReducer, [thunk, createLogger()]);
+  })
+  .service('AsyncActions', asyncService)
+  .directive('ngrAsync', app)
+  .directive('ngrPicker', picker)
+  .directive('ngrPosts', posts);