Polymer-redux 1.0 + Polymer 2 hybrid mode doesn't expose state + dispatch is unknown

It would be great if Polymer-redux would work not only with pure Polymer 2 (e.g. ES6 class syntax) but also with Polymer hybrid mode.

Right now, for hybrid element with the PolymerRedux behavior the Redux state isn’t available and calling this.dispatch causes the following error:

Uncaught TypeError: this.dispatch is not a function

This issue can be replicated by running demo/ready-state.html after applying PR https://github.com/tur-nr/polymer-redux/pull/86.

[kevinpschaaf]

So if I understand, in v1.0.0 PolymerRedux changed from being a behavior (object) to a mixin (function). There’s not a straightforward way to safely auto-convert mixins back to behaviors due to the way super works in ES6 (i.e., we can provide Polymer.mixinBehaviors(), but not Polymer.makeBehaviorFromMixin()).

That said, with the current construction of the PolymerRedux mixin, it looks possible to do it manually, if that’s a solution for you. I did a proof of concept here: https://glitch.com/edit/#!/brick-raver?path=public/index.html:43:2

Basically, this code adds back the behavior-based interface to the mixin function, such that it can be used as a mixin on classes OR a behavior object in hybrid elements.

  const MixinFactory = PolymerRedux;
  PolymerRedux = store => {
    let curr;
    const mixin = MixinFactory(store);
    const base = mixin(class {
      constructor() { return curr; }
      connectedCallback() {}
      disconnectedCakkback() {}
    });
    const behavior = {
      created() {
        curr = this;
        new base();
        curr = null;
      },
      attached: base.prototype.connectedCallback,
      detached: base.prototype.disconnectedCallback,
      dispatch: base.prototype.dispatch,
      getState: base.prototype.getState,
      registered() {
        this.constructor.actions = this.actions;
      }
    };
    return Object.assign(mixin, behavior);
  }
  ...
  // Can be used as a behavior OR a mixin
  const ReduxMixinOrBehavior = PolymerRedux(store);

It’s a bit brittle/hacky, but something like this might work as a stop-gap solution for folks here.

Alternatively, @tur-nr could just consider factoring the code in the mixin callbacks out into shared functions and provide an option to return a behavior that uses the shared code, to avoid needing to deal with super issues. We did something like this for MutableData vs. MutableDataBehavior.

[AliMD]

@kevinpschaaf thank you very much.

@tur-nr could you please add this as a behavior.htm in the project?