Add redux thunk

Polymer · Feb 14, 2017 · 695598c · 695598c
1 parent c122093
commit 695598c
Show file tree

Hide file tree

Showing 6 changed files with 152 additions and 0 deletions.
diff --git a/ep62-redux-async/bower.json b/ep62-redux-async/bower.json
@@ -0,0 +1,21 @@
+{
+  "name": "polymer-redux",
+  "authors": [
+    "Rob Dodson <[email protected]>"
+  ],
+  "description": "",
+  "main": "",
+  "license": "MIT",
+  "homepage": "",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "paper-button": "PolymerElements/paper-button#^1.0.14",
+    "polymer-redux": "tur-nr/polymer-redux#^0.3.0"
+  }
+}
diff --git a/ep62-redux-async/index.html b/ep62-redux-async/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+
+<head>
+  <title>Polymer Redux Demo</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+  <script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="/node_modules/redux/dist/redux.js"></script>
+  <script src="/node_modules/redux-thunk/dist/redux-thunk.js"></script>
+  <link rel="import" href="notification-bar.html">
+  <link rel="import" href="sign-up-form.html">
+</head>
+
+<body>
+  <notification-bar></notification-bar>
+  <sign-up-form></sign-up-form>
+</body>
+
+</html>
diff --git a/ep62-redux-async/notification-bar.html b/ep62-redux-async/notification-bar.html
@@ -0,0 +1,30 @@
+<link rel="import" href="bower_components/polymer/polymer.html">
+<link rel="import" href="redux-store.html">
+
+<dom-module id="notification-bar">
+  <template>
+    <template is="dom-if" if="[[loading]]">
+      <p>Loading...</p>
+    </template>
+    <template is="dom-if" if="[[username]]">
+      <p>Welcome [[username]]!</p>
+    </template>
+  </template>
+
+  <script>
+    Polymer({
+      is: 'notification-bar',
+      behaviors: [ ReduxBehavior ],
+      properties: {
+        loading: {
+          type: Boolean,
+          statePath: 'loading'
+        },
+        username: {
+          type: String,
+          statePath: 'username'
+        }
+      }
+    });
+  </script>
+</dom-module>
diff --git a/ep62-redux-async/package.json b/ep62-redux-async/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "polymer-redux",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "redux": "^3.6.0",
+    "redux-thunk": "^2.1.0"
+  }
+}
diff --git a/ep62-redux-async/redux-store.html b/ep62-redux-async/redux-store.html
@@ -0,0 +1,43 @@
+<link rel="import" href="bower_components/polymer-redux/polymer-redux.html">
+
+<script>
+  const initialState = {
+    username: null,
+    loading: false
+  };
+
+  const reducer = (state, action) => {
+    if (!state) return initialState;
+    switch (action.type) {
+      case 'SIGN_UP_STARTED':
+        return Object.assign({}, state, { loading: true });
+
+      case 'SIGN_UP_COMPLETE':
+        return Object.assign({}, state, {
+          loading: false,
+          username: action.username
+        });
+    }
+  }
+  const store = Redux.createStore(
+    reducer,
+    Redux.applyMiddleware(ReduxThunk.default)
+  );
+  const ReduxBehavior = PolymerRedux(store);
+  const AsyncActionsBehavior = {
+    actions: {
+      signUpWithTimeout: function(username) {
+        return function(dispatch) {
+          dispatch({ type: 'SIGN_UP_STARTED' });
+          // Do async task
+          setTimeout(function() {
+            dispatch({
+              type: 'SIGN_UP_COMPLETE',
+              username: username
+            });
+          }, 3000);
+        }
+      }
+    }
+  };
+</script>
diff --git a/ep62-redux-async/sign-up-form.html b/ep62-redux-async/sign-up-form.html
@@ -0,0 +1,23 @@
+<link rel="import" href="bower_components/polymer/polymer.html">
+<link rel="import" href="redux-store.html">
+
+<dom-module id="sign-up-form">
+  <template>
+    <label>
+      Username:
+      <input type="text" id="username">
+    </label>
+    <button on-tap="signUp">Sign Up</button>
+  </template>
+
+  <script>
+    Polymer({
+      is: 'sign-up-form',
+      behaviors: [ ReduxBehavior, AsyncActionsBehavior ],
+      signUp: function() {
+        const username = this.$.username.value;
+        this.dispatch('signUpWithTimeout', username);
+      }
+    });
+  </script>
+</dom-module>