Port redux async example to ng-redux

Author: EvanOxfeld

examples/async/actions/async.js

@@ -0,0 +1,64 @@
+import fetch from 'isomorphic-fetch';
+
+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
+  };
+}
+
+function requestPosts(reddit) {
+  return {
+    type: REQUEST_POSTS,
+    reddit
+  };
+}
+
+function receivePosts(reddit, json) {
+  return {
+    type: RECEIVE_POSTS,
+    reddit: reddit,
+    posts: json.data.children.map(child => child.data),
+    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));
+    }
+  };
+}

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/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,61 @@
+import * as AsyncActions from '../actions/async';
+
+export default function app() {
+  return {
+    restrict: 'E',
+    controllerAs: 'app',
+    controller: AppController,
+    template: require('./app.html'),
+    scope: {}
+  };
+}
+
+class AppController {
+
+  constructor($ngRedux, $scope) {
+    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,17 @@
+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 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()]);
+  })
+  .directive('ngrAsync', app)
+  .directive('ngrPicker', picker)
+  .directive('ngrPosts', posts);

examples/async/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "ng-redux-async-example",
+  "version": "0.0.0",
+  "description": "ng-redux async example",
+  "scripts": {
+    "start": "webpack-dev-server --content-base dist/ --inline"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wbuchwalter/ngRedux.git"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/wbuchwalter/ngRedux/issues"
+  },
+  "homepage": "https://github.com/wbuchwalter/ngRedux#readme",
+  "dependencies": {
+    "angular": "^1.4.4",
+    "isomorphic-fetch": "^2.1.1",
+    "ng-redux": "^3.0.0",
+    "redux": "^3.0.0",
+    "redux-logger": "^2.0.2",
+    "redux-thunk": "^1.0.0"
+  },
+  "devDependencies": {
+    "babel-core": "^5.6.18",
+    "babel-loader": "^5.1.4",
+    "html-loader": "^0.3.0",
+    "html-webpack-plugin": "^1.6.1",
+    "webpack": "^1.9.11",
+    "webpack-dev-server": "^1.10.1"
+  }
+}