Polymer 2 demo? (and Polymer 3?)

[rjcorwin]

Hi @tur-nr

Thanks so much for the very interesting library. I'm writing my very first open source Polymer + Redux app that will be going to production in Kenya on thousands of tablets in schools and it's very timely that @tjsavage mentioned this library in his Chrome Dev Summit talk.

I did pass by this library when I was doing my original research but being so green I had a hard time understanding how the pieces fit together. After finding an example of how to use Redux in Vanilla JS, I realized that part was dead simple and then had to figure out how to pass state up with some standards around emitting events and attaching payload to event.details and then started using Object.apply(element, state) to properties that have reflectToAttribute: true.

Everything seems to be work fine and dandy but I'm still interested in the ways that this library can help reduce boilerplate. Is the key proposition of this library the following example at https://tur-nr.github.io/polymer-redux/docs?

class DemoApp extends ReduxMixin(Polymer.Element) {
  // ...

  static get properties() {
    return {
      message: {
        type: String,
        statePath: 'message' // Binds state, "Hello, World!"
      }
    };
  }
}

If I understand correctly this saves us from writing the boilerplate of..

1. You don't have to write boilerplate of subscribing a component to the store because it's passed in via ... extends ReduxMixin(Polymer.Element).
2. You don't have to write the boilerplate of applying state to element attributes/properties because element properties are binded to location in the store via statePath: 'message' in the element properties declaration.

Basics aside, I'd love to see the demo code for this updated to Polymer 2 and the impeding Polymer 3 release. Potentially, the demo could actually be the HN Polymer example. I mentioned this in that in the HN Polymer issue queue Polymer/hn-polymer-2#14.

Lastly, for the newbies like myself, perhaps a demo using Redux without polymer-redux so we can compare and contrast? That could help for folks like me who are still groking Redux and Web Components to jump to using Redux, Polymer, and Polymer-Redux.

Thanks again!

[Protoss78]

I had similar problems on getting started with combining Polymer and redux. Therefore I started to incorporate it into a small demo application. Still work in progress and it also tries to add redux saga as well as Firebase, but maybe it helps a little bit: https://github.com/Protoss78/pofiresa

[yanmagale]

@rjsteinert i'm using this project with in My Calm App, wrote in Polymer 2 - and other small projects

I agree with you that it is very important to show a both versios into website. If a person not known flux architecture and its implementations (as redux), it is very complex this first contact

[tur-nr]

I think you must have an understanding of the Flux/Redux paradigm first. One mistake with using this library is that majority of the issues/questions are about the redux or confusion with unidirectional data flow Polymer elements must adapt to.

The aim of this library was to create the applications store outside of any Polymer specific code. Then using the Mixin you can bind state to the components that need it. Typically many applications create a redux-mixin.html file with the store boilerplate in there but I think it's a lot cleaner if you just include the store for the Mixin creation.

One thing to note is @kevinpschaaf approach will be adopted with Polymer 3 with Polymer 2 compatibility. Read more here: https://gist.github.com/kevinpschaaf/995c9d1fd0f58fe021b174c4238b38c3 and see #110 PR.

I will work on a boilerplate application in the mean time.

• Scaffold an empty Polymer+Redux project.
• Create a simple todo using above template.

[ergo]

Hello everyone, I would love to see a demo integrating polymer 2 + webpack + polymer-redux, so far I'm struggling configuring all the parts to cooperate together.

[ergo]

To add to my comment I figured out how to shim a js file with webpack and polymer loader, but since the dist file looks like this: <script>var PolymerRedux ... </script> shimming seems to fail for some reason.
I wonder if this is something that can be fixed via webpack alone.