Use takeEvery and forked effects on CRUD update sagas, to enable simultaneous operations

src/sagas/crud.js

@@ -1,4 +1,4 @@
-import { take, fork, call, put } from 'redux-saga/effects';
+import { takeEvery, call, put } from 'redux-saga/effects';
 import axios from 'axios';
 
 import {
@@ -37,50 +37,34 @@ export function *apiRequest(method, route, params = [], data = null) {
     }
 }
 
-export function *createListener() {
-    while (true) {
-        const { route, pendingId, fields } = yield take(DOC_CREATED);
+export function *createDoc({ route, pendingId, fields }) {
+    const { response, err } = yield call(apiRequest, 'post', route, [], fields);
 
-        const { response, err } = yield call(apiRequest, 'post', route, [], fields);
-
-        yield put(docCreateResponded(route, pendingId, err, response));
-    }
+    yield put(docCreateResponded(route, pendingId, err, response));
 }
 
-export function *readListener() {
-    while (true) {
-        const { route } = yield take(DOC_READ);
+export function *readDoc({ route }) {
+    const { response, err } = yield call(apiRequest, 'get', route);
 
-        const { response, err } = yield call(apiRequest, 'get', route);
-
-        yield put(docReadResponded(route, err, response));
-    }
+    yield put(docReadResponded(route, err, response));
 }
 
-export function *updateListener() {
-    while (true) {
-        const { route, id, fields } = yield take(DOC_UPDATED);
+export function *updateDoc({ route, id, fields }) {
+    const { response, err } = yield call(apiRequest, 'put', route, [id], fields);
 
-        const { response, err } = yield call(apiRequest, 'put', route, [id], fields);
-
-        yield put(docUpdateResponded(route, id, err, response));
-    }
+    yield put(docUpdateResponded(route, id, err, response));
 }
 
-export function *deleteListener() {
-    while (true) {
-        const { route, id } = yield take(DOC_DELETED);
+export function *deleteDoc({ route, id }) {
+    const { err } = yield call(apiRequest, 'delete', route, [id]);
 
-        const { err } = yield call(apiRequest, 'delete', route, [id]);
-
-        yield put(docDeleteResponded(route, id, err));
-    }
+    yield put(docDeleteResponded(route, id, err));
 }
 
 export function *crudSaga() {
-    yield fork(createListener);
-    yield fork(readListener);
-    yield fork(updateListener);
-    yield fork(deleteListener);
+    yield takeEvery(DOC_CREATED, createDoc);
+    yield takeEvery(DOC_READ, readDoc);
+    yield takeEvery(DOC_UPDATED, updateDoc);
+    yield takeEvery(DOC_DELETED, deleteDoc);
 }
 

test/sagas/crud.spec.js

@@ -4,9 +4,13 @@ import axios from 'axios';
 
 import {
     apiRequest,
+    createDoc,
     createListener,
+    readDoc,
     readListener,
+    updateDoc,
     updateListener,
+    deleteDoc,
     deleteListener,
     crudSaga
 } from 'sagas/crud';
@@ -68,7 +72,7 @@ describe('crudSaga', () => {
         });
     });
 
-    describe('createListener', () => {
+    describe('createDoc', () => {
         const route = 'employees';
         const pendingId = '<pendingId>';
         const fields = {
@@ -76,104 +80,96 @@ describe('crudSaga', () => {
             email: 'john.doe@mubaloo.com'
         };
 
-        it('should listen to DOC_CREATED and make API calls', () => {
+        const action = docCreated(route, pendingId, fields);
+
+        it('should call the API with a POST request', () => {
             const response = { isResponse: true };
 
-            testSaga(createListener)
+            testSaga(createDoc, action)
                 .next()
-                .take(DOC_CREATED)
-                .next(docCreated(route, pendingId, fields))
                 .call(apiRequest, 'post', route, [], fields)
                 .next({ response, err: null })
                 .put(docCreateResponded(route, pendingId, null, response))
                 .next()
-                .take(DOC_CREATED);
+                .isDone();
         });
 
         it('should handle errors', () => {
             const err = new Error('something bad happened');
 
-            testSaga(createListener)
+            testSaga(createDoc, action)
                 .next()
-                .take(DOC_CREATED)
-                .next(docCreated(route, pendingId, fields))
                 .call(apiRequest, 'post', route, [], fields)
                 .next({ response: null, err })
                 .put(docCreateResponded(route, pendingId, err, null))
                 .next()
-                .take(DOC_CREATED);
+                .isDone();
         });
     });
 
-    describe('readListener', () => {
-        it('should listen to DOC_READ and make API calls', () => {
+    describe('readDoc', () => {
+        it('should call the API with a GET request', () => {
             const route = 'employees';
 
             const response = { isResponse: true };
 
-            testSaga(readListener)
+            testSaga(readDoc, docRead(route))
                 .next()
-                .take(DOC_READ)
-                .next(docRead(route))
                 .call(apiRequest, 'get', route)
                 .next({ response, err: null })
                 .put(docReadResponded(route, null, response))
                 .next()
-                .take(DOC_READ);
+                .isDone();
         });
     });
 
-    describe('updateListener', () => {
-        const route = 'employees';
-        const actualId = '<actualId>';
-        const fields = {
-            name: 'Jack Doe'
-        };
+    describe('updateDoc', () => {
+        it('should call the API with a PUT request', () => {
+            const route = 'employees';
+            const actualId = '<actualId>';
+            const fields = {
+                name: 'Jack Doe'
+            };
 
-        it('should listen to DOC_UPDATED and make API calls', () => {
             const response = { isResponse: true };
 
-            testSaga(updateListener)
+            testSaga(updateDoc, docUpdated(route, actualId, fields))
                 .next()
-                .take(DOC_UPDATED)
-                .next(docUpdated(route, actualId, fields))
                 .call(apiRequest, 'put', route, [actualId], fields)
                 .next({ response, err: null })
                 .put(docUpdateResponded(route, actualId, null, response))
                 .next()
-                .take(DOC_UPDATED);
+                .isDone();
         });
     });
 
-    describe('deleteListener', () => {
-        const route = 'employees';
-        const actualId = '<actualId>';
+    describe('deleteDoc', () => {
+        it('should call the API with a DELETE request', () => {
+            const route = 'employees';
+            const actualId = '<actualId>';
 
-        it('should listen to DOC_DELETED and make API calls', () => {
             const response = { isResponse: true };
 
-            testSaga(deleteListener)
+            testSaga(deleteDoc, docDeleted(route, actualId))
                 .next()
-                .take(DOC_DELETED)
-                .next(docDeleted(route, actualId))
                 .call(apiRequest, 'delete', route, [actualId])
                 .next({ response, err: null })
                 .put(docDeleteResponded(route, actualId, null))
                 .next()
-                .take(DOC_DELETED);
+                .isDone();
         });
     });
 
     it('should fork listeners for CRUD actions', () => {
         testSaga(crudSaga)
             .next()
-            .fork(createListener)
+            .takeEveryEffect(DOC_CREATED, createDoc)
             .next()
-            .fork(readListener)
+            .takeEveryEffect(DOC_READ, readDoc)
             .next()
-            .fork(updateListener)
+            .takeEveryEffect(DOC_UPDATED, updateDoc)
             .next()
-            .fork(deleteListener)
+            .takeEveryEffect(DOC_DELETED, deleteDoc)
             .next()
             .isDone();
     });