Redux saga for easy testing and extending

package.json

@@ -33,7 +33,8 @@
     "electron-store": "2.0.0",
     "fix-path": "2.1.0",
     "gatsby-cli": "1.1.58",
-    "ps-tree": "1.1.0"
+    "ps-tree": "1.1.0",
+    "redux-saga": "^0.16.0"
   },
   "devDependencies": {
     "@babel/core": "7.0.0-beta.44",

src/middlewares/task.middleware.js

@@ -30,7 +30,7 @@ export default (store: any) => (next: any) => (action: any) => {
   const state = store.getState();
 
   const project = getProjectById(task.projectId, state);
-  const projectPath = getPathForProjectId(task.projectId, state);
+  const projectPath = getPathForProjectId(state, task.projectId);
 
   // eslint-disable-next-line default-case
   switch (action.type) {

src/reducers/paths.reducer.js

@@ -56,5 +56,5 @@ export const getDefaultPath = (projectId: string) =>
 //
 //
 // Selectors
-export const getPathForProjectId = (projectId: string, state: any) =>
+export const getPathForProjectId = (state: any, projectId: string) =>
   state.paths[projectId] || getDefaultPath(projectId);

src/reducers/projects.reducer.js

@@ -123,7 +123,7 @@ const prepareProjectForConsumption = (
     createdAt: project.guppy.createdAt,
     tasks: getTasksForProjectId(project.guppy.id, state),
     dependencies: getDependenciesForProjectId(project.guppy.id, state),
-    path: getPathForProjectId(project.guppy.id, state),
+    path: getPathForProjectId(state, project.guppy.id),
   };
 };
 

src/sagas/dependency.saga.js

@@ -0,0 +1,81 @@
+import { select, call, put, takeEvery } from 'redux-saga/effects';
+import { getPathForProjectId } from '../reducers/paths.reducer';
+import {
+  installDependency,
+  uninstallDependency,
+} from '../services/dependencies.service';
+import { loadProjectDependency } from '../services/read-from-disk.service';
+import {
+  ADD_DEPENDENCY_START,
+  UPDATE_DEPENDENCY_START,
+  DELETE_DEPENDENCY_START,
+  addDependencyFinish,
+  addDependencyError,
+  updateDependencyFinish,
+  updateDependencyError,
+  deleteDependencyFinish,
+  deleteDependencyError,
+} from '../actions';
+
+/**
+ * Trying to install new dependency, if success dispatching "finish" action
+ * if not - dispatching "error" ection
+ */
+export function* addDependency({ projectId, dependencyName, version }) {
+  const projectPath = yield select(getPathForProjectId, projectId);
+  try {
+    yield call(installDependency, projectPath, dependencyName, version);
+    const dependency = yield call(
+      loadProjectDependency,
+      projectPath,
+      dependencyName
+    );
+    yield put(addDependencyFinish(projectId, dependency));
+  } catch (err) {
+    yield call([console, 'error'], 'Failed to install dependency', err);
+    yield put(addDependencyError(projectId, dependencyName));
+  }
+}
+
+/**
+ * Trying to update existing dependency, if success dispatching "finish" action,
+ * if not - dispatching "error" action
+ */
+export function* updateDependency({
+  projectId,
+  dependencyName,
+  latestVersion,
+}) {
+  const projectPath = yield select(getPathForProjectId, projectId);
+  try {
+    yield call(installDependency, projectPath, dependencyName, latestVersion);
+    yield put(updateDependencyFinish(projectId, dependencyName, latestVersion));
+  } catch (err) {
+    yield call([console, 'error'], 'Failed to update dependency', err);
+    yield put(updateDependencyError(projectId, dependencyName));
+  }
+}
+
+/**
+ * Trying to delete dependency, if success dispatching "finish" action,
+ * if not - dispatching "error" action
+ */
+export function* deleteDependency({ projectId, dependencyName }) {
+  const projectPath = yield select(getPathForProjectId, projectId);
+  try {
+    yield call(uninstallDependency, projectPath, dependencyName);
+    yield put(deleteDependencyFinish(projectId, dependencyName));
+  } catch (err) {
+    yield call([console, 'error'], 'Failed to delete dependency', err);
+    yield put(deleteDependencyError(projectId, dependencyName));
+  }
+}
+
+/**
+ * Root dependencies saga, watching for "start" actions
+ */
+export default function* rootSaga() {
+  yield takeEvery(ADD_DEPENDENCY_START, addDependency);
+  yield takeEvery(UPDATE_DEPENDENCY_START, updateDependency);
+  yield takeEvery(DELETE_DEPENDENCY_START, deleteDependency);
+}

src/sagas/dependency.saga.test.js

@@ -0,0 +1,52 @@
+import { select, call, put } from 'redux-saga/effects';
+import { addDependency } from './dependency.saga';
+import { getPathForProjectId } from '../reducers/paths.reducer';
+import { installDependency } from '../services/dependencies.service';
+import { loadProjectDependency } from '../services/read-from-disk.service';
+import { addDependencyFinish, addDependencyError } from '../actions';
+
+jest.mock('../services/read-from-disk.service');
+
+describe('Dependency sagas', () => {
+  describe('addDependency saga', () => {
+    const startAction = {
+      projectId: 'foo',
+      dependencyName: 'redux',
+      version: '2.3',
+    };
+    const dependency = {
+      name: 'redux',
+      version: '2.3',
+    };
+    it('should install new dependency', () => {
+      const saga = addDependency(startAction);
+      expect(saga.next().value).toEqual(select(getPathForProjectId, 'foo'));
+      expect(saga.next('/path/to/project/').value).toEqual(
+        call(installDependency, '/path/to/project/', 'redux', '2.3')
+      );
+      expect(saga.next().value).toEqual(
+        call(loadProjectDependency, '/path/to/project/', 'redux')
+      );
+      expect(saga.next(dependency).value).toEqual(
+        put(addDependencyFinish('foo', dependency))
+      );
+      expect(saga.next().done).toBe(true);
+    });
+
+    it('should handle error', () => {
+      const error = new Error('something wrong');
+      const saga = addDependency(startAction);
+      expect(saga.next().value).toEqual(select(getPathForProjectId, 'foo'));
+      expect(saga.next('/path/to/project/').value).toEqual(
+        call(installDependency, '/path/to/project/', 'redux', '2.3')
+      );
+      expect(saga.throw(error).value).toEqual(
+        call([console, 'error'], 'Failed to install dependency', error)
+      );
+      expect(saga.next().value).toEqual(
+        put(addDependencyError('foo', 'redux'))
+      );
+      expect(saga.next().done).toBe(true);
+    });
+  });
+});

src/sagas/index.js

@@ -0,0 +1,6 @@
+import { all } from 'redux-saga/effects';
+import dependencySaga from './dependency.saga';
+
+export default function*() {
+  yield all([dependencySaga()]);
+}

src/store/configure-store.dev.js

@@ -1,15 +1,18 @@
 // @flow
 import { createStore, compose, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
+import createSagaMiddleware from 'redux-saga';
 
 import rootReducer from '../reducers';
 import { handleReduxUpdates } from '../services/redux-persistence.service';
 import taskMiddleware from '../middlewares/task.middleware';
-import dependencyMiddleware from '../middlewares/dependency.middleware';
 import importProjectMiddleware from '../middlewares/import-project.middleware';
+import rootSaga from '../sagas';
 
 import DevTools from '../components/DevTools';
 
+const sagaMiddleware = createSagaMiddleware();
+
 export default function configureStore(initialState: any) {
   const store = createStore(
     rootReducer,
@@ -18,13 +21,15 @@ export default function configureStore(initialState: any) {
       applyMiddleware(
         thunk,
         taskMiddleware,
-        dependencyMiddleware,
-        importProjectMiddleware
+        importProjectMiddleware,
+        sagaMiddleware
       ),
       DevTools.instrument()
     )
   );
 
+  sagaMiddleware.run(rootSaga);
+
   // Allow direct access to the store, for debugging/testing
   window.store = store;
 

src/store/configure-store.prod.js

@@ -1,12 +1,15 @@
 // @flow
 import { createStore, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
+import createSagaMiddleware from 'redux-saga';
 
 import rootReducer from '../reducers';
 import { handleReduxUpdates } from '../services/redux-persistence.service';
 import taskMiddleware from '../middlewares/task.middleware';
-import dependencyMiddleware from '../middlewares/dependency.middleware';
 import importProjectMiddleware from '../middlewares/import-project.middleware';
+import rootSaga from '../sagas';
+
+const sagaMiddleware = createSagaMiddleware();
 
 export default function configureStore(initialState: any) {
   const store = createStore(
@@ -15,11 +18,13 @@ export default function configureStore(initialState: any) {
     applyMiddleware(
       thunk,
       taskMiddleware,
-      dependencyMiddleware,
-      importProjectMiddleware
+      importProjectMiddleware,
+      sagaMiddleware
     )
   );
 
+  sagaMiddleware.run(rootSaga);
+
   // Allow direct access to the store, for debugging/testing
   // Doing this in production as well for the simple reason that this app is
   // distributed to developers, and they may want to tinker with this :)

yarn.lock

@@ -7691,6 +7691,10 @@ [email protected]:
     prop-types "^15.5.7"
     redux-devtools-instrument "^1.0.1"
 
+redux-saga@^0.16.0:
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/redux-saga/-/redux-saga-0.16.0.tgz#0a231db0a1489301dd980f6f2f88d8ced418f724"
+
 [email protected]:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.2.0.tgz#e615a16e16b47a19a515766133d1e3e99b7852e5"