Use race to cancel on LOCATION_CHANGE

app/containers/HomePage/sagas.js

@@ -4,7 +4,9 @@
 
 /* eslint-disable no-constant-condition */
 
-import { take, call, put, select } from 'redux-saga/effects';
+import { take, call, put, select, race } from 'redux-saga/effects';
+
+import { LOCATION_CHANGE } from 'react-router-redux';
 
 import { LOAD_REPOS } from 'containers/App/constants';
 import { reposLoaded, repoLoadingError } from 'containers/App/actions';
@@ -19,18 +21,26 @@ export default [
 
 // Individual exports for testing
 export function* getGithubData() {
-  yield take(LOAD_REPOS);
-  const username = yield select(selectUsername());
-  const requestURL = `https://api.github.com/users/${username}/repos?type=all&sort=updated`;
-
-  // Use call from redux-saga for easier testing
-  const repos = yield call(request, requestURL);
-
-  // We return an object in a specific format, see utils/request.js for more information
-  if (repos.err === undefined || repos.err === null) {
-    yield put(reposLoaded(repos.data, username));
-  } else {
-    console.log(repos.err.response); // eslint-disable-line no-console
-    yield put(repoLoadingError(repos.err));
+  while (true) {
+    const watcher = yield race({
+      loadRepos: take(LOAD_REPOS),
+      stop: take(LOCATION_CHANGE), // stop watching if user leaves page
+    });
+
+    if (watcher.stop) break;
+
+    const username = yield select(selectUsername());
+    const requestURL = `https://api.github.com/users/${username}/repos?type=all&sort=updated`;
+
+    // Use call from redux-saga for easier testing
+    const repos = yield call(request, requestURL);
+
+    // We return an object in a specific format, see utils/request.js for more information
+    if (repos.err === undefined || repos.err === null) {
+      yield put(reposLoaded(repos.data, username));
+    } else {
+      console.log(repos.err.response); // eslint-disable-line no-console
+      yield put(repoLoadingError(repos.err));
+    }
   }
 }

app/containers/HomePage/tests/sagas.test.js

@@ -3,7 +3,8 @@
  */
 
 import expect from 'expect';
-import { take, call, put, select } from 'redux-saga/effects';
+import { take, call, put, select, race } from 'redux-saga/effects';
+import { LOCATION_CHANGE } from 'react-router-redux';
 
 import { getGithubData } from '../sagas';
 
@@ -13,17 +14,18 @@ import { reposLoaded, repoLoadingError } from 'containers/App/actions';
 import request from 'utils/request';
 import { selectUsername } from 'containers/HomePage/selectors';
 
-describe('getGithubData Saga', () => {
-  const username = 'mxstbr';
-  let generator;
+const generator = getGithubData();
+const username = 'mxstbr';
 
+describe('getGithubData Saga', () => {
   // We have to test twice, once for a successful load and once for an unsuccessful one
   // so we do all the stuff that happens beforehand automatically in the beforeEach
   beforeEach(() => {
-    generator = getGithubData();
-
-    expect(generator.next().value).toEqual(take(LOAD_REPOS));
-    expect(generator.next().value).toEqual(select(selectUsername()));
+    expect(generator.next().value).toEqual(race({
+      loadRepos: take(LOAD_REPOS),
+      stop: take(LOCATION_CHANGE),
+    }));
+    expect(generator.next(take(LOAD_REPOS)).value).toEqual(select(selectUsername()));
     const requestURL = `https://api.github.com/users/${username}/repos?type=all&sort=updated`;
     expect(generator.next(username).value).toEqual(call(request, requestURL));
   });