Redux: Alors, comment utiliser le traitement redux avec le canevas html5

Créé le 21 juil. 2015 · 3Commentaires · Source: reduxjs/redux

Salut, j'ai un projet qui a une zone de canevas, et je rends le graphique (c'est-à-dire les nœuds + les bords) dans l'une des 3 mises en page statiques dessus. Dites sur un autre composant (peut-être une barre de topnav), l'utilisateur clique sur un bouton et cela devrait déclencher le canevas pour animer ces nœuds et ces bords, en les déplaçant pour les changer en une autre disposition parmi les 3.

Mon problème est donc le suivant : dans ce scénario, l'état ne sera apparemment pas trop utile pour rendre le canevas car c'est le travail de dessiner le contexte. Cependant, le canevas a toujours son "état", qui est son paramètre de mise en page, mais je ne veux pas que React actualise l'élément de canevas HTML une fois que le state.layout est modifié car, comme je l'ai dit, c'est le travail de dessin contexte (et je perds l'animation si je fais cela, car il s'agit d'un nouveau rendu de l'élément HTML, pas du canevas). Par conséquent, la seule chose dont j'ai besoin ici est la répartition entre les composants via Actions.

Mais dans Flux (idem pour Redux), il est prévu de changer d'état pour déclencher le re-rendu de l'interface utilisateur et l'interface utilisateur est basée sur l'état lui-même. Dans le canevas, les actions sont toujours censées déclencher le changement d'état, mais l'interface utilisateur (canevas) est rendue par redessin.

Je pose cette question parce que seulement la moitié de mon projet utilise canvas, et il y a beaucoup de composants qui sont purement rendus par React (oui, j'utilise React mais pas le modèle Flux). Je n'aime pas Flux parce que c'est un peu "sur-conçu" à mon avis. Ensuite, j'ai trouvé ce Redux, qui réduit juste la partie que je n'aimais pas à propos de Flux. Mais encore, j'ai ce problème de toile, dont je ne sais pas s'il est sage d'utiliser Redux ou non.

Pourriez-vous s'il vous plaît me donner quelques conseils ou un petit extrait de code pour aider? Ou si vous pensez qu'il n'est pas approprié d'utiliser Redux dans le projet que j'ai mentionné ci-dessus, dites-le moi aussi.

Mille mercis!

PS J'ai regardé votre vidéo sur youtube (en ce qui concerne cette réaction hot loader + discours Redux). Brillant.

question

Source

rui-ktei

👍1

Commentaire le plus utile

Si je vous comprends bien, il s'agit essentiellement du même problème que j'ai récemment rencontré en intégrant D3 avec React. J'avais besoin de créer la balise <svg> initiale et de rendre mon état, puis, lorsque l'état a changé, de lancer des animations d3, d'ajouter de nouveaux éléments, de supprimer des éléments, etc.

Cet article de StackOverflow explique comment faire en sorte que React rende votre élément <svg> la première fois (ou dans votre cas <canvas> , puis que React garde ses petits doigts sales hors de lui, tandis que vous donnant toujours une chance de redessiner les choses lorsque l'état change :

Voici le code de l'article :

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

L'essentiel à noter est que shouldComponentUpdate() renvoie toujours false , donc React ne touchera jamais cette partie du DOM après le rendu initial.

Vous devriez pouvoir simplement remplacer les appels d3 par des appels à votre code de rendu.

mindjuice le 23 juil. 2015

👍4

Tous les 3 commentaires

Voici le code de l'article :

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

L'essentiel à noter est que shouldComponentUpdate() renvoie toujours false , donc React ne touchera jamais cette partie du DOM après le rendu initial.

Vous devriez pouvoir simplement remplacer les appels d3 par des appels à votre code de rendu.

mindjuice le 23 juil. 2015

👍4

@mindjuice Merci beaucoup. Cela m'a certainement aidé. Au fait, je suis rui-infotrack, l'auteur de cette question. J'utilisais auparavant le compte de l'entreprise...