Как вызвать метод mapStateToProps из миксина в Polymer3-Redux

Question

В своих примерах я использую это полимерно-редукционное репо из github:

https://github.com/tur-nr/polymer-redux/tree/dev/v2.x

У меня есть компонент redux-todo, который соединяет todoApp с хранилищем redux. Я также создал миксин, из которого я хотел бы унаследовать некоторые свойства, и в то же время я хотел бы подключить одно из этих свойств к магазину из миксина. Мне удается вызвать метод mapStateToProps из миксина, но, к сожалению, он никогда не привязывает свойство к магазину.

Вот что у меня есть:

перевождь-todo.js:

import TodoApp from 'todo-app';
import ReduxMixin from 'mixins/redux';
import { bindActionCreators } from 'polymer-redux';
import { AnotherMixin } from 'another-mixin.js';
import { ExtraMixin } from 'extra-mixin.js';

class ReduxTodo extends AnotherMixin(ExtraMixin(ReduxMixin(TodoApp))) {
    /**
     * We map any redux state to the element properties here. Feel free to use
     * libraries like reselect to improve the performance of your app.
     *
     * @param {object} state The redux state object.
     * @param {HTMLElement} element The element instance.
     *
     * @return {Object} Key-value map of properties and their values.
     */


    static mapStateToProps(state, element) {
        super.mapStateToProps(state);
        console.log('mapping props');
        console.dir(state);
        console.dir(this);
        return {
            tasks: state.tasks,
            extras: state.extras,//from extras mixin
            //another: state.another
        };
    }

    constructor(){
        super();
        console.log(this.extras);
        console.log(this.another);
    }

    ready() {
        super.ready();
        // do something that requires access to the shadow tree
        console.log(this.extras);
        console.log(this.another);
        console.log(this.tasks);
        //console.log(this.mapStateToProps);
        ;
      }


    /**
     * Mapping dispatch to CustomEvents that bubble from internal elements.
     * This is only called once so make sure you bind correctly.
     *
     * Use the exported helper `bindActionCreators` to construct a key-value map
     * of events that will call `dispatch` with the returning value.
     *
     * @param {Function} dispatch The redux dispatch function.
     * @param {HTMLElement} element The element instance.
     *
     * @return {Object} Key-value map of event names and their listeners.
     */
    static mapDispatchToEvents(dispatch, element) {
        return bindActionCreators(
            {
                addTask(event) {
                    return {
                        type: 'ADD_TASK',
                        task: event.detail
                    };
                },
                updateTaskDone(event) {
                    return {
                        type: 'UPDATE_TASK_DONE',
                        index: event.detail.index,
                        done: event.detail.done
                    };
                },
                removeTask(event) {
                    return {
                        type: 'REMOVE_TASK',
                        index: event.detail
                    };
                }
            },
            dispatch
        );
    }
}

customElements.define('redux-todo', ReduxTodo);

другой-mixin.js:

import {dedupingMixin} from '@polymer/polymer/lib/utils/mixin.js';
import ReduxMixin from 'mixins/redux';

let internalAnotherMixin = (base) =>
  class extends ReduxMixin(base) {
    static get properties() {
        return {
            another:{
                type:Boolean,
                value: true
            } 
        };
    }
    constructor(){
        super();
        console.log("Hello from another constructor");
        //this.another = true;
    }

    static mapStateToProps(state, element) {
        console.log('mapping props from another-mixin');
        console.dir(this);
        console.dir(state);
        return {
            another: state.another
        };
    }

  }

  export const AnotherMixin = dedupingMixin(internalAnotherMixin);

экстра-mixin.js:

import {dedupingMixin} from '@polymer/polymer/lib/utils/mixin.js';

let internalExtraMixin = (base) =>
  class extends base {
    static get properties() {
        return {
            extras: String
        };
    }
    constructor(){
        super();
        console.log("Hello from extras constructor");
        //this.extras = "Hello world";
    }
  }

  export const ExtraMixin = dedupingMixin(internalExtraMixin);

Если я вызываю метод mapStateToProps из redux-todo.js, он работает как следует, но если я хочу использовать миксин в разных классах, я должен сделать это во всех них, поэтому мне просто интересно, если это можно звонить из миксин.

В магазине значение другого свойства равно false. После запуска моего кода и регистрации реквизитов это все еще верно, поэтому он не работает ....

Редактировать 1:

Также я только что заметил, что каждое действие вызывается дважды. Поэтому, когда я добавляю что-то в список задач, элемент добавляется в список 2 раза Я исправил эту проблему, удалив ReduxMixin из redux-todo.js. Поскольку я добавляю его в другой файл-mixin.js, его будет наследовать файл redux-todo.js.

Это новый redux.todo.js:

...
class ReduxTodo extends AnotherMixin(ExtraMixin((TodoApp))) {
...
}

Редактировать 2:

Для этой проблемы импорта дубликатов в этом случае также будет хорошим решением, если я просто удаляю ReduxMixin из mixins и просто оставляю его в redux-todo.js (он наследуется оттуда, поэтому он будет работать в mixins а также)