Update deps to 2019-09-18

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015", "react", "stage-2"]
+  "presets": ["env", "react"]
 }

Counter.js

@@ -1,12 +1,17 @@
 /*eslint-disable no-unused-vars */
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types';
 
-const Counter = ({ value, onIncrement, onDecrement }) =>
+const Counter = ({ value, onIncrement, onIncrementAsync, onDecrement }) =>
       <div>
         <button onClick={onIncrement}>
           Increment
         </button>
         {' '}
+        <button onClick={onIncrementAsync}>
+          IncrementAsync
+        </button>
+        {' '}
         <button onClick={onDecrement}>
           Decrement
         </button>
@@ -19,6 +24,7 @@ const Counter = ({ value, onIncrement, onDecrement }) =>
 Counter.propTypes = {
   value: PropTypes.number.isRequired,
   onIncrement: PropTypes.func.isRequired,
+  onIncrementAsync: PropTypes.func.isRequired,
   onDecrement: PropTypes.func.isRequired
 }
 

main.js

@@ -1,13 +1,22 @@
-import "babel-polyfill"
+import 'babel-polyfill'
 
 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 { watchIncrementAsync } from './mysagas'
 
-const store = createStore(reducer)
+const sagaMiddleware = createSagaMiddleware()
+
+const store = createStore(
+  reducer,
+  applyMiddleware(sagaMiddleware)
+)
+
+sagaMiddleware.run(watchIncrementAsync)
 
 const action = type => store.dispatch({type})
 
@@ -16,7 +25,9 @@ function render() {
     <Counter
       value={store.getState()}
       onIncrement={() => action('INCREMENT')}
-      onDecrement={() => action('DECREMENT')} />,
+      onIncrementAsync={() => action('INCREMENT_ASYNC')}
+      onDecrement={() => action('DECREMENT')}
+    />,
     document.getElementById('root')
   )
 }

mysagas.js

@@ -0,0 +1,18 @@
+import { put, delay, takeLatest, cancelled } from 'redux-saga/effects'
+
+export function* incrementAsync() {
+  try {
+    yield delay(1000)
+    yield put({ type: 'INCREMENT' })
+  } finally {
+    if (yield cancelled()) {
+      console.log("I'm cancelled.")
+    }
+  }
+}
+
+export function* watchIncrementAsync() {
+  console.log("watch increment async")
+  yield takeLatest('INCREMENT_ASYNC', incrementAsync)
+}
+

package.json

@@ -4,7 +4,6 @@
   "description": "Redux Saga beginner tutorial",
   "main": "lib/index.js",
   "scripts": {
-    "test": "babel-node sagas.spec.js | tap-spec",
     "start": "budo main.js:build.js --dir ./ --verbose  --live -- -t babelify"
   },
   "repository": {
@@ -14,22 +13,21 @@
   "author": "Yassine ELOUAFI <[email protected]>",
   "license": "MIT",
   "dependencies": {
-    "babel-polyfill": "6.3.14",
-    "react": "^0.14.3",
-    "react-dom": "^0.14.3",
-    "redux": "^3.3.1",
-    "redux-saga": "^0.15.0"
+    "babel-core": "^6.26.3",
+    "babel-polyfill": "^6.26.0",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "redux": "^4.0.4",
+    "redux-saga": "^1.1.1"
   },
   "devDependencies": {
-    "babel-cli": "^6.1.18",
-    "babel-core": "6.4.0",
-    "babel-preset-es2015": "^6.1.18",
-    "babel-preset-react": "^6.1.18",
-    "babel-preset-stage-2": "^6.1.18",
-    "babelify": "^7.2.0",
-    "browserify": "^13.0.0",
-    "budo": "^8.0.4",
-    "tap-spec": "^4.1.1",
-    "tape": "^4.2.2"
+    "babel-cli": "^6.26.0",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
+    "babelify": "8",
+    "browserify": "^16.5.0",
+    "budo": "^11.6.3",
+    "tap-spec": "^5.0.0",
+    "tape": "^4.11.0"
   }
 }