UNPKG

1.61 kBJavaScriptView Raw
1/**
2@license
3Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9*/
10/**
11 This is a JavaScript mixin that you can use to connect a Custom Element base
12 class to a Redux store. The `stateChanged(state)` method will be called when
13 the state is updated.
14
15 Example:
16
17 import { connect } from 'pwa-helpers/connect-mixin.js';
18
19 class MyElement extends connect(store)(HTMLElement) {
20 stateChanged(state) {
21 this.textContent = state.data.count.toString();
22 }
23 }
24*/
25export const connect = (store) => (baseElement) => class extends baseElement {
26 connectedCallback() {
27 if (super.connectedCallback) {
28 super.connectedCallback();
29 }
30 this._storeUnsubscribe = store.subscribe(() => this.stateChanged(store.getState()));
31 this.stateChanged(store.getState());
32 }
33 disconnectedCallback() {
34 this._storeUnsubscribe();
35 if (super.disconnectedCallback) {
36 super.disconnectedCallback();
37 }
38 }
39 /**
40 * The `stateChanged(state)` method will be called when the state is updated.
41 */
42 stateChanged(_state) { }
43};
44//# sourceMappingURL=connect-mixin.js.map
\No newline at end of file