Fixed use of redux action

package-lock.json

@@ -1159,6 +1159,59 @@
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
     },
+    "@redux-saga/core": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@redux-saga/core/-/core-1.0.3.tgz",
+      "integrity": "sha512-zf8h5N0oTzaNeSMxOWH9GJMB9IRSM8JubDsrZVsvVltXjzFFSR8DNt7tbPoRJUK0hFfQB1it+bL+dEMWpD7wXA==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "@redux-saga/deferred": "^1.0.1",
+        "@redux-saga/delay-p": "^1.0.1",
+        "@redux-saga/is": "^1.0.2",
+        "@redux-saga/symbols": "^1.0.1",
+        "@redux-saga/types": "^1.0.2",
+        "redux": ">=0.10 <5",
+        "typescript-tuple": "^2.1.0"
+      }
+    },
+    "@redux-saga/deferred": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@redux-saga/deferred/-/deferred-1.0.1.tgz",
+      "integrity": "sha512-+gW5xQ93QXOOmRLAmX8x2Hx1HpbTG6CM6+HcdTSbJovh4uMWaGyeDECnqXSt8QqA/ja3s2nqYXLqXFKepIQ1hw==",
+      "dev": true
+    },
+    "@redux-saga/delay-p": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@redux-saga/delay-p/-/delay-p-1.0.1.tgz",
+      "integrity": "sha512-0SnNDyDLUyB4NThtptAwiprNOnbCNhoed/Rp5JwS7SB+a/AdWynVgg/E6BmjsggLFNr07KW0bzn05tsPRBuU7Q==",
+      "dev": true,
+      "requires": {
+        "@redux-saga/symbols": "^1.0.1"
+      }
+    },
+    "@redux-saga/is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@redux-saga/is/-/is-1.0.2.tgz",
+      "integrity": "sha512-WnaUOwYvPK2waWjzebT4uhL8zY76XNkzzpJ2EQJe8bN1tByvAjvT7MuJZTSshOhdHL5PsRO0MsH224XIXBJidQ==",
+      "dev": true,
+      "requires": {
+        "@redux-saga/symbols": "^1.0.1",
+        "@redux-saga/types": "^1.0.2"
+      }
+    },
+    "@redux-saga/symbols": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@redux-saga/symbols/-/symbols-1.0.1.tgz",
+      "integrity": "sha512-akKkzcVnb1RzJaZV2LQFbi51abvdICMuAKwwLoCjjxLbLAGIw9EJxk5ucNnWSSCEsoEQMeol5tkAcK+Xzuv1Bg==",
+      "dev": true
+    },
+    "@redux-saga/types": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@redux-saga/types/-/types-1.0.2.tgz",
+      "integrity": "sha512-8/qcMh15507AnXJ3lBeuhsdFwnWQqnp68EpUuHlYPixJ5vjVmls7/Jq48cnUlrZI8Jd9U1jkhfCl0gaT5KMgVw==",
+      "dev": true
+    },
     "@svgr/babel-plugin-add-jsx-attribute": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz",
@@ -9508,6 +9561,15 @@
         "symbol-observable": "^1.2.0"
       }
     },
+    "redux-saga": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/redux-saga/-/redux-saga-1.0.3.tgz",
+      "integrity": "sha512-ORo16st4cvrS+tpthMi6mJz1mMIuM//0EKFPAZjKTvDglRDebc7vTOJa0oeqT0iAZeYupusAstprFb0+3YDw/w==",
+      "dev": true,
+      "requires": {
+        "@redux-saga/core": "^1.0.3"
+      }
+    },
     "regenerate": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
@@ -11025,6 +11087,30 @@
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
+    "typescript-compare": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/typescript-compare/-/typescript-compare-0.0.2.tgz",
+      "integrity": "sha512-8ja4j7pMHkfLJQO2/8tut7ub+J3Lw2S3061eJLFQcvs3tsmJKp8KG5NtpLn7KcY2w08edF74BSVN7qJS0U6oHA==",
+      "dev": true,
+      "requires": {
+        "typescript-logic": "^0.0.0"
+      }
+    },
+    "typescript-logic": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/typescript-logic/-/typescript-logic-0.0.0.tgz",
+      "integrity": "sha512-zXFars5LUkI3zP492ls0VskH3TtdeHCqu0i7/duGt60i5IGPIpAHE/DWo5FqJ6EjQ15YKXrt+AETjv60Dat34Q==",
+      "dev": true
+    },
+    "typescript-tuple": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/typescript-tuple/-/typescript-tuple-2.2.1.tgz",
+      "integrity": "sha512-Zcr0lbt8z5ZdEzERHAMAniTiIKerFCMgd7yjq1fPnDJ43et/k9twIFQMUYff9k5oXcsQ0WpvFcgzK2ZKASoW6Q==",
+      "dev": true,
+      "requires": {
+        "typescript-compare": "^0.0.2"
+      }
+    },
     "uglify-js": {
       "version": "3.4.10",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",

package.json

@@ -32,6 +32,7 @@
   "devDependencies": {
     "react-redux": "^7.1.0",
     "redux": "^4.0.1",
+    "redux-saga": "^1.0.3",
     "uuid": "^3.3.2"
   }
 }

src/index.js

@@ -5,6 +5,10 @@ import { Provider } from 'react-redux'
 import store from './js/store/index'
 import App from './js/components/App.jsx'
 import * as serviceWorker from './serviceWorker'
+import { addArticle } from "./js/actions/index"
+
+window.store = store
+window.addArticle = addArticle
 
 ReactDOM.render(
 	<Provider	store={store}>

src/js/actions/index.js

@@ -1,5 +1,5 @@
 import { ADD_ARTICLE } from "../constants/action-types"
 
 export function addArticle(payload) {
-  return { type: "ADD_ARTICLE", payload }
+  return { type: ADD_ARTICLE, payload }
 }

src/js/components/Form.jsx

@@ -29,6 +29,7 @@ class ConnectedForm extends Component {
     event.preventDefault()
     const { title } = this.state
     const id = uuidv1()
+
     this.props.addArticle({ title, id })
     this.setState({ title: "" })
   }

src/js/index.js

@@ -1,6 +0,0 @@
-import store from "../js/store/index"
-import { addArticle } from "../js/actions/index"
-
-window.store = store
-
-window.addArticle = addArticle

src/js/reducers/index.js

@@ -1,4 +1,4 @@
-import { ADD_ARTICLE } from "../constants/action-types"
+import { ADD_ARTICLE } from '../constants/action-types'
 
 const initialState = {
   articles: []