<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>
Try it out: Redux DevTools
How to use Redux in Polymer (v1.x).