- redux-demo.html
- redux-mixin.html
- main.html
- Demo
<link rel="import" href="polymer.html">
<link rel="import" href="redux-mixin.html">
<dom-module id="redux-demo">
<template>
<p>Polymer says: <i>[[message]]</i></p>
</template>
<script>
// Extend the mixin...
class ReduxDemo extends ReduxMixin(Polymer.Element) {
static get is() { return 'redux-demo'; }
static get properties() {
return {
message: {
type: String,
statePath: 'message' // ...and let the magic begin!
}
};
}
}
customElements.define(ReduxDemo.is, ReduxDemo);
</script>
</dom-module>
<link rel="import" href="polymer-redux.html">
<script>
// Setup a Redux store
const initial = {message: 'Redux is awesome.'};
const reducer = function (state, action) {
switch (action.type) {
case 'UPDATE_MESSAGE': return {message: action.message};
default: return state;
}
};
const store = Redux.createStore(
reducer,
initial,
// The best part 8)
Redux.compose(
window.devToolsExtension
? window.devToolsExtension()
: v => v
)
);
// Create the Polymer mixin
ReduxMixin = PolymerRedux(store);
</script>
<link rel="import" href="redux-demo.html">
<!-- Run the demo -->
<redux-demo></redux-demo>
Polycast
How to use Redux in Polymer (v1.x).