Use $http in async example

Author: EvanOxfeld

examples/async/actions/async.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/actions/asyncService.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/constants/ActionTypes.js

@@ -1,5 +1,3 @@
-import * as AsyncActions from '../actions/async';
-
 export default function app() {
   return {
     restrict: 'E',
@@ -12,7 +10,7 @@ export default function app() {
 
 class AppController {
 
-  constructor($ngRedux, $scope) {
+  constructor($ngRedux, $scope, AsyncActions) {
     const unsubscribe = $ngRedux.connect(this.mapStateToThis, AsyncActions)((selectedState, actions) => {
       this.componentWillReceiveStateAndActions(selectedState, actions);
       Object.assign(this, selectedState, actions);

examples/async/containers/app.js

@@ -4,6 +4,7 @@ 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';
@@ -12,6 +13,7 @@ angular.module('async', [ngRedux])
   .config(($ngReduxProvider) => {
     $ngReduxProvider.createStoreWith(rootReducer, [thunk, createLogger()]);
   })
+  .service('AsyncActions', asyncService)
   .directive('ngrAsync', app)
   .directive('ngrPicker', picker)
   .directive('ngrPosts', posts);

examples/async/index.js

@@ -16,7 +16,6 @@
   "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",

examples/async/package.json

@@ -2,7 +2,7 @@ import { combineReducers } from 'redux';
 import {
   SELECT_REDDIT, INVALIDATE_REDDIT,
   REQUEST_POSTS, RECEIVE_POSTS
-} from '../actions/async';
+} from '../constants/ActionTypes';
 
 function selectedReddit(state = 'angularjs', action) {
   switch (action.type) {