Redux: Entonces, ¿cómo usar redux tratar con html5 canvas?

Creado en 21 jul. 2015 · 3Comentarios · Fuente: reduxjs/redux

Hola, tengo un proyecto que tiene un área de lienzo y renderizo el gráfico (es decir, nodos + bordes) en uno de los 3 diseños estáticos. Digamos que en otro componente (tal vez una barra de navegación superior), el usuario hace clic en un botón y debería activar el lienzo para animar esos nodos y bordes, moviéndolos para cambiarlos a otro diseño entre los 3.

Entonces mi problema es: en este escenario, aparentemente el estado no será demasiado útil para representar el lienzo porque ese es el trabajo de dibujar el contexto. Sin embargo, el lienzo todavía tiene su "estado", que es su parámetro de diseño, pero no quiero que React actualice el elemento del lienzo HTML una vez que se cambie state.layout porque, como dije, es el trabajo de dibujar contexto (y pierdo la animación si hago eso, porque es una nueva representación del elemento HTML, no del lienzo). Por lo tanto, lo único que necesito aquí es el envío entre componentes a través de Acciones.

Pero en Flux (lo mismo para Redux), se espera que cambie el estado para activar la reproducción de la interfaz de usuario y la interfaz de usuario se basa en el estado en sí. En el lienzo, todavía se espera que las acciones activen el cambio de estado, pero la interfaz de usuario (lienzo) se representa mediante un nuevo dibujo.

Estoy preguntando esto porque solo la mitad de mi proyecto usa lienzo, y hay muchos componentes que son puramente renderizados por React (sí, estoy usando React pero no usando el patrón Flux). No me gusta Flux porque, en mi opinión, está un poco "sobredimensionado". Luego encontré este Redux, que solo reduce la parte que no me gustó de Flux. Pero aún así, tengo este problema con el lienzo, que no estoy seguro de si es prudente usar Redux o no.

¿Podría darme algunos consejos o un pequeño fragmento de código para ayudar? O si cree que no es apropiado usar Redux en el proyecto que mencioné anteriormente, por favor dígame eso también.

¡Un millón de gracias!

PD: vi su video en youtube (con respecto a que reaccionar carga caliente + discurso de Redux). Brillante.

question

Fuente

rui-ktei

👍1

Comentario más útil

Si te entiendo correctamente, este es esencialmente el mismo problema con el que me encontré recientemente al integrar D3 con React. Necesitaba crear la etiqueta <svg> inicial y representar mi estado, y luego, cuando el estado cambió, iniciar animaciones d3, agregar nuevos elementos, eliminar elementos, etc.

Este artículo de StackOverflow proporciona una explicación de cómo hacer que React renderice su elemento <svg> la primera vez (o en su caso <canvas> , y luego hacer que React mantenga sus pequeños dedos sucios fuera de él, mientras todavía te da la oportunidad de volver a dibujar las cosas cuando cambia el estado:

Aquí está el código del artículo:

React.createClass({
    render: function() {
        return <svg></svg>;
    },
    componentDidMount: function() {
        d3.select(this.getDOMNode())
            .call(chart(this.props));
    },
    shouldComponentUpdate: function(props) {
        d3.select(this.getDOMNode())
            .call(chart(props));
        return false;
    }
});

La clave a tener en cuenta es que shouldComponentUpdate() siempre devuelve false , por lo que React nunca tocará esa parte del DOM después del renderizado inicial.

Debería poder reemplazar las llamadas d3 con llamadas a su código de renderizado.

mindjuice en 23 jul. 2015

👍4

Todos 3 comentarios

Aquí está el código del artículo:

React.createClass({
    render: function() {
        return <svg></svg>;
    },
    componentDidMount: function() {
        d3.select(this.getDOMNode())
            .call(chart(this.props));
    },
    shouldComponentUpdate: function(props) {
        d3.select(this.getDOMNode())
            .call(chart(props));
        return false;
    }
});

La clave a tener en cuenta es que shouldComponentUpdate() siempre devuelve false , por lo que React nunca tocará esa parte del DOM después del renderizado inicial.

Debería poder reemplazar las llamadas d3 con llamadas a su código de renderizado.

mindjuice en 23 jul. 2015

👍4

@mindjuice Muchas gracias. Esto definitivamente me ayudó. Por cierto, soy rui-infotrack, el autor de esta pregunta. Anteriormente estaba usando la cuenta de la empresa ...