Initial commit with a simple redux example in vanilla JS

danantal · Mar 11, 2019 · 59ec4d6 · 59ec4d6
commit 59ec4d6
Show file tree

Hide file tree

Showing 8 changed files with 6,069 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+.vscode/
+dist/
+node_modules/
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+# Simple redux example
diff --git a/package.json b/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "simple-redux",
+  "version": "1.0.0",
+  "description": "Demo Redux",
+  "main": "/src/app.ts",
+  "repository": "https://github.com/danantal/simple-redux.git",
+  "license": "MIT",
+  "scripts": {
+    "start": "webpack-dev-server --open"
+  },
+  "devDependencies": {
+    "babel-cli": "6.26.0",
+    "babel-preset-env": "1.6.0",
+    "clean-webpack-plugin": "^2.0.0",
+    "css-loader": "0.28.5",
+    "file-loader": "0.11.2",
+    "html-webpack-plugin": "^3.2.0",
+    "style-loader": "0.18.2",
+    "ts-loader": "^5.3.3",
+    "typescript": "^3.3.3333",
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.2.3",
+    "webpack-dev-server": "^3.2.1"
+  },
+  "dependencies": {
+    "@types/redux": "^3.6.0",
+    "redux": "^4.0.1"
+  }
+}
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Simple Redux</title>
+</head>
+<body>
+<div id="app">
+    <div style="margin-top: 20px">
+        <div class="row">
+            <div class="input-group col-sm">
+                <input id="op-number" type="number" placeholder="Enter a Number" />
+            </div>
+
+            <div class="col-sm">
+                <button id="add-btn">Add</button>
+
+                <button id="subtract-btn">Subtract</button>
+
+                <button id="reset-btn">Reset</button>
+            </div>
+        </div>
+
+        <hr>
+
+        <div class="row">
+            <h3 id="grand-total" style="margin: 0 auto">0</h3>
+        </div>
+    </div>
+</div>
+</body>
+</html>
diff --git a/src/index.ts b/src/index.ts
@@ -0,0 +1,69 @@
+import { createStore } from 'redux';
+
+// SET-UP
+const reducer = (state = {total: 0}, action: {type: string, payload?: any}) => {
+  console.log(action);
+
+  switch(action.type) {
+    case 'ADD':
+      return {...state, total: state.total + action.payload.value};
+    case 'SUBTRACT':
+      return {...state, total: state.total - action.payload.value};
+    case 'RESET':
+      return {...state, total: 0};
+    default:
+      return state;
+  }
+};
+
+const enhancer = ((window as any).__REDUX_DEVTOOLS_EXTENSION__ && (window as any).__REDUX_DEVTOOLS_EXTENSION__())
+
+const store = createStore(reducer, enhancer);
+
+// ACTION-CREATORS
+const add = (value: number) => ({
+  type: 'ADD',
+  payload: { value },
+});
+
+const subtract = (value: number) => ({
+  type: 'SUBTRACT',
+  payload: { value },
+});
+
+const reset = () => ({ type: 'RESET' });
+
+// SUBSCRIBE
+store.subscribe(() => {
+  setTotal(store.getState().total);
+});
+
+// DISPATCH
+document.getElementById('add-btn').addEventListener('click', () => {
+  store.dispatch(add(getValue()));
+});
+
+document.getElementById('subtract-btn').addEventListener('click', () => {
+  store.dispatch(subtract(getValue()));
+});
+
+document.getElementById('reset-btn').addEventListener('click', () => {
+  store.dispatch(reset());
+});
+
+
+// HELPERS
+
+
+/*/************************
+  PART 2: UTILITY METHODS
+/**************************/
+
+const getValue = () => {
+  const value = parseInt((document.getElementById('op-number') as HTMLInputElement).value);
+  return isNaN(value) ? 0 : value;
+};
+
+const setTotal = (value: number) => {
+  document.getElementById('grand-total').innerHTML = value.toString();
+};
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+        "outDir": "./dist/",
+        "sourceMap": true,
+        "noImplicitAny": true,
+        "module": "commonjs",
+        "target": "es5",
+        "jsx": "react",
+        "allowJs": true
+    }
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,34 @@
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const CleanWebpackPlugin = require("clean-webpack-plugin");
+
+module.exports = {
+  entry: "./src/index.ts",
+  module: {
+    rules: [
+      {
+        test: /\.(j|t)sx?$/,
+        use: "ts-loader",
+        exclude: /node_modules/
+      }
+    ]
+  },
+  devtool: "inline-source-map",
+  devServer: {
+    contentBase: path.resolve(__dirname, "dist"),
+  },
+  resolve: {
+    extensions: [".tsx", ".ts", ".js"]
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    new HtmlWebpackPlugin({
+      title: "Development",
+      template: "./src/index.html"
+    })
+  ],
+  output: {
+    filename: "app.js",
+    path: path.resolve(__dirname, "dist")
+  }
+};