Cómo llamar a MAPStatetoprops Método desde una mezcla en Polymer3-Redux -- javascript campo con redux campo con polymer-3.x camp Relacionados El problema

How to call mapStateToProps method from a mixin in Polymer3-Redux


2
vote

problema

Español

Estoy usando este repo de Polymer-Redux de GitHub en mis ejemplos:

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

Tengo el componente REDUX-TODO que conecta el TODOAPP con la tienda REDUX. También creé una mezcla de donde me gustaría heredar algunas propiedades y, al mismo tiempo, me gustaría conectar una de esta propiedad a la tienda de la MIXIN. Me las arreglo para llamar al método MAPSTATETOPROPS de la mezcla, pero desafortunadamente nunca vincula la propiedad a la tienda.

aquí es lo que tengo hasta ahora:

redux-toddo.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);   

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

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

Si llamo al método MAPSTATETOPROPPS desde REDUX-TODO.JS, funciona como debería, pero si quiero usar la mezcla en diferentes clases, tengo que hacerlo en todos ellos, así que me estaba preguntando si es posible llamarlo desde la mezcla.

En la tienda, el valor para la otra propiedad es falsa. Después de ejecutar mi código y registrar los accesorios, sigue siendo cierto, por lo que no funciona ...

Editar 1:

También me di cuenta de que cada acción se llama dos veces. Entonces, cuando estoy agregando algo a la lista de ToDO, el elemento se agrega a la lista 2 veces Fije este problema eliminando el Reduxmixin desde RedUX-TODO.JS. Ya que lo estoy agregando a otro-Mixin.js, el Redux-Todo.js heredará.

Este es el nuevo redux.todo.js:

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

Editar 2:

Para este problema de importación duplicado, también es una buena solución en este caso si simplemente quito el ReduxMixin de las mezclas y simplemente déjalo en el RedUX-TODO.JS (se hereda desde allí, por lo que funcionará en las mezclas también)

Original en ingles

I am using this polymer-redux repo from github in my examples:

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

I have the redux-todo component which connects the todoApp with the redux store. I also created a mixin from where I would like to inherit some properties and at the same time I would like to connect one of this property to the store from the mixin. I manage to call the mapStateToProps method from the mixin but unfortunately it never bind the property to the store.

Here is what I have so far:

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

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

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

If I call the mapStateToProps method from the redux-todo.js it works as it should but if I want to use the mixin in different classes I have to do it in all of them, so I was just wondering if it is possible to call it from the mixin.

In the store the value for the another property is false. After running my code and logging the props it is still true so it is not working....

Edit 1:

Also I just noticed that every action is getting called twice. So when I am adding something to the todo list the element is added to the list 2 times I fixed this issue by removing the ReduxMixin from the redux-todo.js. Since I am adding it to another-mixin.js the redux-todo.js will inherit it.

This is the new redux.todo.js:

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

Edit 2:

For this duplicate import problem it is also a good solution in this case if I just remove the ReduxMixin from the mixins and just leave it in the redux-todo.js(it is inherited from there so it will work in the mixins as well)

        
   
   

Lista de respuestas


Relacionados problema

9  ¿Manera correcta de usar elementos de polímero 2 en el elemento polimérica 3?  ( Correct way to use polymer 2 elements in polymer 3 element ) 
¿Cómo puedo usar elementos de polímero 2 en el elemento polimer 3? El siguiente no funciona ya que <link> Element no funciona dentro de Sombra DOM. stati...

0  Manipulación de propiedades JSON con nombre que contiene @ símbolo  ( Handling json properties with name containing symbol ) 
Necesito actualizar una UI a Polymer 3 y los datos recibidos se convierten de XML a JSON antes de que llegue al cliente. En el lado del cliente, estoy usand...

0  Polímero de desplazamiento infinito 3 y Fetch API  ( Infinite scrolling polymer 3 and fetch api ) 
bien en primer lugar, dime, ¿voy a bajar el agujero de conejo derecho? Estoy construyendo una nueva PWA que, en primer lugar, se diseñará para Mobile, He ...

0  Cómo definir correctamente un camino a los nodos_modules con polímero 3  ( How to properly define a path to node modules with polymer 3 ) 
¿Cómo debo definir una sección de importación dentro de mi componente web con polímero 3. Currenty tengo: import {html, PolymerElement} from '@polymer/po...

10  Importación de hojas de estilos externos en polímero 3  ( Import external stylesheets in polymer 3 ) 
¿Hay alguna manera de importar archivos CSS externos que solo afecta a la sombra DOM? Estoy trabajando con Sass y creando los archivos CSS automáticamente, po...

8  Plantilla de importación desde el archivo HTML separado en Polymer 3  ( Import template from separate html file in polymer 3 ) 
En lugar de return "HTML CONTENT"; Tengo un archivo HTML separado y quiero importarlo a mi archivo JS para devolver el contenido de él, pero import templat...

0  Elemento de polímero 3 listo antes de que los niños listos - ¿Cómo migra?  ( Polymer 3 element ready before children ready how migrate ) 
En un elemento de polímero 1, se llamaba cuando se llamaba sombra Dom y se había llamado a la sombra. Esto significaba que un elemento estaba listo cuando est...

0  Manera correcta de usar módulos de estilo compartido en Polymer 3  ( Correct way to use shared style modules in polymer 3 ) 
En mi proyecto, me gustaría usar estilos compartidos, pero no tengo idea de cómo puedo escribirlo correctamente para IE11 y BORDE. Estoy usando polímero 3 c...

0  Importación de componentes web sin módulo Bundler  ( Importing web component without module bundler ) 
Estoy tratando de seguir estos Instrucciones para usar componentes web. Instalé el botón de Papel Polímero con npm install --save @polymer/paper-button , a...

-1  ¿Cuál es un reemplazo adecuado del menú de papel y el submenú de papel en el polímero 3?  ( What is a proper replacement of paper menu and paper submenu in polymer 3 ) 
Tengo una aplicación de polímero 1 que usó el menú de papel y el submenú de papel. Lo estoy reescribiendo en Polymer 3. ¿Cuál es el consenso general para su r...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos