Completed redux-sage tutorial on docs. For testing.

Counter.js

@@ -1,25 +1,20 @@
 /*eslint-disable no-unused-vars */
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from "react";
 
-const Counter = ({ value, onIncrement, onDecrement }) =>
-      <div>
-        <button onClick={onIncrement}>
-          Increment
-        </button>
-        {' '}
-        <button onClick={onDecrement}>
-          Decrement
-        </button>
-        <hr />
-        <div>
-          Clicked: {value} times
-        </div>
-      </div>
+const Counter = ({ value, onIncrement, onDecrement, onIncrementAsync }) => (
+  <div>
+    <button onClick={onIncrementAsync}>Increment after 1 second</button>
+    <button onClick={onIncrement}>Increment</button>{" "}
+    <button onClick={onDecrement}>Decrement</button>
+    <hr />
+    <div>Clicked: {value} times</div>
+  </div>
+);
 
-Counter.propTypes = {
-  value: PropTypes.number.isRequired,
-  onIncrement: PropTypes.func.isRequired,
-  onDecrement: PropTypes.func.isRequired
-}
+// Counter.propTypes = {
+//   value: PropTypes.number.isRequired,
+//   onIncrement: PropTypes.func.isRequired,
+//   onDecrement: PropTypes.func.isRequired
+// }
 
-export default Counter
+export default Counter;

main.js

@@ -1,25 +1,34 @@
-import "babel-polyfill"
+import "babel-polyfill";
 
-import React from 'react'
-import ReactDOM from 'react-dom'
-import { createStore, applyMiddleware } from 'redux'
+import React from "react";
+import ReactDOM from "react-dom";
+import { createStore, applyMiddleware } from "redux";
+import createSagaMiddleware from "redux-saga";
 
-import Counter from './Counter'
-import reducer from './reducers'
+import Counter from "./Counter";
+import reducer from "./reducers";
+import rootSaga from "./sagas";
+// import { helloSaga } from "./sagas";
 
-const store = createStore(reducer)
+const sagaMiddleware = createSagaMiddleware();
 
-const action = type => store.dispatch({type})
+const store = createStore(reducer, applyMiddleware(sagaMiddleware));
+
+sagaMiddleware.run(rootSaga);
+
+const action = type => store.dispatch({ type });
 
 function render() {
   ReactDOM.render(
     <Counter
       value={store.getState()}
-      onIncrement={() => action('INCREMENT')}
-      onDecrement={() => action('DECREMENT')} />,
-    document.getElementById('root')
-  )
+      onIncrement={() => action("INCREMENT")}
+      onDecrement={() => action("DECREMENT")}
+      onIncrementAsync={() => action("INCREMENT_ASYNC")}
+    />,
+    document.getElementById("root")
+  );
 }
 
-render()
-store.subscribe(render)
+render();
+store.subscribe(render);

sagas.js

@@ -0,0 +1,22 @@
+import { takeEvery, put, all, call } from "redux-saga/effects";
+
+export const delay = ms => new Promise(res => setTimeout(res, ms));
+
+export function* helloSaga() {
+  yield console.log("Hello World!");
+}
+
+//WORKER SAGA: will perform the async increment task:
+export function* incrementAsync() {
+  yield call(delay, 1000);
+  yield put({ type: "INCREMENT" });
+}
+
+//WATCHER SAGA: spawns a new incrementAsync task on each INCREMENT_ASYNC:
+export function* watchIncrementAsync() {
+  yield takeEvery("INCREMENT_ASYNC", incrementAsync);
+}
+
+export default function* rootSaga() {
+  yield all([helloSaga(), watchIncrementAsync()]);
+}

sagas.spec.js

@@ -0,0 +1,29 @@
+import test from "tape";
+
+import { put, call } from "redux-saga/effects";
+
+import { incrementAsync, delay } from "./sagas";
+
+test("incrementAsync Saga test", assert => {
+  const gen = incrementAsync();
+
+  assert.deepEqual(
+    gen.next().value,
+    call(delay, 1000),
+    "incrementAsync Saga must call delay(1000)"
+  );
+
+  assert.deepEqual(
+    gen.next().value,
+    put({ type: "INCREMENT" }),
+    "incrementAsync Saga must dispatch an action"
+  );
+
+  assert.deepEqual(
+    gen.next(),
+    { done: true, value: undefined },
+    "incrementAsync Saga must be done"
+  );
+
+  assert.end();
+});