1 files changed, 72 insertions, 0 deletions
diff --git a/src/components/my-view2.js b/src/components/my-view2.js
new file mode 100644
index 0000000..0dee7ee
--- /dev/null
+++ b/src/components/my-view2.js
@@ -0,0 +1,72 @@
+/**
+@license
+Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+
+import { html } from '@polymer/lit-element';
+import { PageViewElement } from './page-view-element.js';
+import { connect } from 'pwa-helpers/connect-mixin.js';
+
+// This element is connected to the Redux store.
+import { store } from '../store.js';
+
+// These are the actions needed by this element.
+import { increment, decrement } from '../actions/counter.js';
+
+// We are lazy loading its reducer.
+import counter from '../reducers/counter.js';
+store.addReducers({
+  counter
+});
+
+// These are the elements needed by this element.
+import './counter-element.js';
+
+// These are the shared styles needed by this element.
+import { SharedStyles } from './shared-styles.js';
+
+class MyView2 extends connect(store)(PageViewElement) {
+  _render(props) {
+    return html`
+      ${SharedStyles}
+      <section>
+        <h2>Redux example: simple counter</h2>
+        <div class="circle">${props._value}</div>
+        <p>This page contains a reusable <code>&lt;counter-element&gt;</code>. The
+        element is not built in a Redux-y way (you can think of it as being a
+        third-party element you got from someone else), but this page is connected to the
+        Redux store. When the element updates its counter, this page updates the values
+        in the Redux store, and you can see the current value of the counter reflected in
+        the bubble above.</p>
+        <br><br>
+      </section>
+      <section>
+        <p>
+          <counter-element value="${props._value}" clicks="${props._clicks}"
+              on-counter-incremented="${() => store.dispatch(increment())}"
+              on-counter-decremented="${() => store.dispatch(decrement())}">
+          </counter-element>
+        </p>
+      </section>
+    `;
+  }
+
+  static get properties() { return {
+    // This is the data from the store.
+    _clicks: Number,
+    _value: Number
+  }}
+
+  // This is called every time something is updated in the store.
+  _stateChanged(state) {
+    this._clicks = state.counter.clicks;
+    this._value = state.counter.value;
+  }
+}
+
+window.customElements.define('my-view2', MyView2);