Question

在我的示例中，我使用的是github上的polymer-redux存储库：

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

我有redux-todo组件，该组件将todoApp与redux存储连接。我还从我想继承一些属性的地方创建了一个mixin，同时我想将此属性之一从mixin连接到商店。我设法从mixin调用了mapStateToProps方法，但不幸的是它从未将属性绑定到商店。

这是我到目前为止所拥有的：

redux-todo.js：

DataPoint p=new DataPoint(chart1.Series["Celler"]);
p.SetValueY(cellVoltage[cell]);
p.Label=cellname[cell];//string
p.Color=Color.FromArgb(255 - cell * 20, 255, 80cell*20);
chart1.Series["Celler"].Points.Add(p);

another-mixin.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);

extra-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);

如果我从redux-todo.js调用mapStateToProps方法，它可以正常工作，但是如果我想在不同的类中使用mixin，则必须在所有这些类中使用它，所以我只是想知道是否可以从mixin调用它。

在商店中，另一个属性的值为false。在运行我的代码并记录了道具之后，它仍然是正确的，因此无法正常工作。...

编辑1：

我也刚刚注意到，每个动作都被调用两次。因此，当我向待办事项列表中添加内容时，元素会被添加到列表中2次我通过从redux-todo.js中删除ReduxMixin来解决此问题。由于我将其添加到another-mixin.js中，因此redux-todo.js将继承它。

这是新的redux.todo.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);

编辑2：

对于这个重复的导入问题，如果我只是从mixins中删除ReduxMixin并将其留在redux-todo.js（它是从那里继承的，那么它将在mixins中工作），在这种情况下也是一个很好的解决方案也是

如何从Polymer3-Redux中的mixin调用mapStateToProps方法

编辑1：

编辑2：

0 个答案: