fix: dont dispatch resolved promise action if view has changed

Fix #5

Author: vkarpov15

bin/main.js

@@ -9,14 +9,18 @@ const store = require('../store');
 class ProfileFavorites extends Profile {
   componentWillMount() {
     store.dispatch({
-      type: 'PROFILE_PAGE_LOADED',
+      type: 'PROFILE_FAVORITES_PAGE_LOADED',
       payload: Promise.all([
         agent.Profile.get(this.props.params.username),
         agent.Articles.favoritedBy(this.props.params.username)
       ])
     });
   }
 
+  componentWillUnmount() {
+    store.dispatch({ type: 'PROFILE_FAVORITES_PAGE_UNLOADED' });
+  }
+
   renderTabs() {
     return (
       <ul className="nav nav-pills outline-active">

src/components/ProfileFavorites.js

@@ -5,22 +5,31 @@ const agent = require('./agent');
 exports.promiseMiddleware = store => next => action => {
   if (isPromise(action.payload)) {
     store.dispatch({ type: 'ASYNC_START', subtype: action.type });
+    const initialView = store.getState().viewChangeCounter;
     action.payload.then(
       res => {
+        // The view might have changed mid-promise, so if the view unloaded,
+        // don't dispatch the action.
+        const finalView = store.getState().viewChangeCounter;
+        if (finalView !== initialView) {
+          return;
+        }
         console.log('RESULT', res);
         action.payload = res;
         store.dispatch(action);
       },
       error => {
+        const finalView = store.getState().viewChangeCounter;
+        if (finalView !== initialView) {
+          return;
+        }
         console.log('ERROR', error);
         action.error = true;
         action.payload = error.response.body;
         store.dispatch(action);
       }
     );
 
-    store.dispatch({ type: 'LOADING' });
-
     return;
   }
 

src/middleware.js

@@ -5,11 +5,13 @@ const auth = require('./reducers/auth');
 const editor = require('./reducers/editor');
 const home = require('./reducers/home');
 const profile = require('./reducers/profile');
+const profileFavorites = require('./reducers/profileFavorites');
 const settings = require('./reducers/settings');
 
 const defaultState = {
   appName: 'Conduit',
-  token: null
+  token: null,
+  viewChangeCounter: 0
 };
 
 module.exports = (state = defaultState, action) => {
@@ -18,6 +20,7 @@ module.exports = (state = defaultState, action) => {
   state = editor(state, action);
   state = home(state, action);
   state = profile(state, action);
+  state = profileFavorites(state, action);
   state = settings(state, action);
   switch (action.type) {
     case 'APP_LOAD':
@@ -46,7 +49,9 @@ module.exports = (state = defaultState, action) => {
       state = Object.assign({}, state, { redirectTo: '/' });
       break;
     case 'ARTICLE_PAGE_UNLOADED':
-      state = Object.assign({}, state);
+      state = Object.assign({}, state, {
+        viewChangeCounter: state.viewChangeCounter + 1
+      });
       delete state.article;
       delete state.comments;
       delete state.commentErrors;
@@ -79,5 +84,6 @@ module.exports = (state = defaultState, action) => {
       break;
   }
 
+  console.log(state);
   return state;
 };

src/reducer.js

@@ -16,7 +16,9 @@ module.exports = (state, action) => {
       break;
     case 'LOGIN_PAGE_UNLOADED':
     case 'REGISTER_PAGE_UNLOADED':
-      state = Object.assign({}, state);
+      state = Object.assign({}, state, {
+        viewChangeCounter: state.viewChangeCounter + 1
+      });
       const props = ['errors', 'username', 'email', 'password', 'inProgress']
       for (const key of props) {
         delete state[key];

src/reducers/auth.js

@@ -23,7 +23,9 @@ module.exports = (state, action) => {
       }
       break;
     case 'EDITOR_PAGE_UNLOADED':
-      state = Object.assign({}, state);
+      state = Object.assign({}, state, {
+        viewChangeCounter: state.viewChangeCounter + 1
+      });
       const keys = [
         'title',
         'description',

src/reducers/editor.js

@@ -12,7 +12,9 @@ module.exports = (state, action) => {
       });
       break;
     case 'HOME_PAGE_UNLOADED':
-      state = Object.assign({}, state);
+      state = Object.assign({}, state, {
+        viewChangeCounter: state.viewChangeCounter + 1
+      });
       delete state.articles;
       delete state.tags;
       delete state.tab;

src/reducers/home.js

@@ -11,7 +11,9 @@ module.exports = (state = defaultState, action) => {
       });
       break;
     case 'PROFILE_PAGE_UNLOADED':
-      state = Object.assign({}, state);
+      state = Object.assign({}, state, {
+        viewChangeCounter: state.viewChangeCounter + 1
+      });
       delete state.profile;
       delete state.articles;
       delete state.articlesCount;

src/reducers/profile.js

@@ -0,0 +1,12 @@
+'use strict';
+
+module.exports = (state = defaultState, action) => {
+  switch (action.type) {
+    case 'PROFILE_FAVORITES_PAGE_UNLOADED':
+      return Object.assign({}, state, {
+        viewChangeCounter: state.viewChangeCounter + 1
+      });
+  }
+
+  return state;
+};

src/reducers/profileFavorites.js

@@ -13,7 +13,9 @@ module.exports = (state, action) => {
       }
       break;
     case 'SETTINGS_PAGE_UNLOADED':
-      state = Object.assign({}, state);
+      state = Object.assign({}, state, {
+        viewChangeCounter: state.viewChangeCounter + 1
+      });
       for (const key of ['errors', 'inProgress']) {
         delete state[key];
       }