exchange redux thunk with redux saga

Author: rwieruch

package.json

@@ -12,7 +12,7 @@
     "react-redux": "^5.0.5",
     "redux": "^3.6.0",
     "redux-logger": "^3.0.6",
-    "redux-thunk": "^2.2.0",
+    "redux-saga": "^0.15.3",
     "uuid": "^3.0.1"
   },
   "scripts": {

src/index.js

@@ -3,7 +3,8 @@ import ReactDOM from 'react-dom';
 import { applyMiddleware, combineReducers, createStore } from 'redux';
 import { Provider, connect } from 'react-redux';
 import { createLogger } from 'redux-logger';
-import thunk from 'redux-thunk';
+import createSagaMiddleware, { delay } from 'redux-saga';
+import { put, takeEvery } from 'redux-saga/effects';
 import { schema, normalize } from 'normalizr';
 import uuid from 'uuid/v4';
 import './index.css';
@@ -26,6 +27,7 @@ const TODO_ADD = 'TODO_ADD';
 const TODO_TOGGLE = 'TODO_TOGGLE';
 const FILTER_SET = 'FILTER_SET';
 const NOTIFICATION_HIDE = 'NOTIFICATION_HIDE';
+const TODO_ADD_WITH_NOTIFICATION = 'TODO_ADD_WITH_NOTIFICATION';
 
 // reducers
 
@@ -128,13 +130,10 @@ function applyRemoveNotification(state, action) {
 // action creators
 
 function doAddTodoWithNotification(id, name) {
-  return function (dispatch) {
-    dispatch(doAddTodo(id, name));
-
-    setTimeout(function () {
-      dispatch(doHideNotification(id));
-    }, 5000);
-  }
+  return {
+    type: TODO_ADD_WITH_NOTIFICATION,
+    todo: { id, name },
+  };
 }
 
 function doHideNotification(id) {
@@ -186,6 +185,20 @@ function getArrayOfObject(object) {
   return Object.keys(object).map(key => object[key]);
 }
 
+// sagas
+
+function* watchAddTodoWithNotification() {
+  yield takeEvery(TODO_ADD_WITH_NOTIFICATION, handleAddTodoWithNotification);
+}
+
+function* handleAddTodoWithNotification(action) {
+  const { todo } = action;
+  const { id, name } = todo;
+  yield put(doAddTodo(id, name));
+  yield delay(5000);
+  yield put(doHideNotification(id));
+}
+
 // store
 
 const rootReducer = combineReducers({
@@ -195,13 +208,16 @@ const rootReducer = combineReducers({
 });
 
 const logger = createLogger();
+const saga = createSagaMiddleware();
 
 const store = createStore(
   rootReducer,
   undefined,
-  applyMiddleware(thunk, logger)
+  applyMiddleware(saga, logger)
 );
 
+saga.run(watchAddTodoWithNotification);
+
 // components
 
 function TodoApp() {