Redux: So verwenden Sie Redux Deal mit html5 Canvas
Hallo, ich habe ein Projekt mit einem Canvas-Bereich und rendere den Graphen (dh Knoten + Kanten) in einem von 3 statischen Layouts darauf. Angenommen, bei einer anderen Komponente (vielleicht einer Topnav-Leiste) klickt der Benutzer auf eine Schaltfläche und es sollte die Leinwand auslösen, um diese Knoten und Kanten zu animieren und sie zu verschieben, um sie in ein anderes Layout unter den 3 zu ändern.
Mein Problem ist also: In diesem Szenario ist der Zustand anscheinend nicht allzu nützlich, um die Leinwand zu rendern, da dies die Aufgabe des Zeichnens des Kontexts ist. Der Canvas hat jedoch immer noch seinen "Zustand", der sein Layout-Parameter ist, aber ich möchte nicht, dass React das HTML-Canvas-Element aktualisiert, sobald state.layout geändert wird, denn wie gesagt, es ist die Aufgabe des Zeichnens Kontext (und ich verliere die Animation, wenn ich das tue, weil es eine Neudarstellung des HTML-Elements ist, nicht der Leinwand). Daher brauche ich hier nur den Versand zwischen den Komponenten über Aktionen.
Aber in Flux (das gleiche für Redux) wird erwartet, dass der Status geändert wird, um das erneute Rendern der Benutzeroberfläche auszulösen, und die Benutzeroberfläche basiert auf dem Status selbst. Im Canvas wird weiterhin erwartet, dass Aktionen die Änderung des Zustands auslösen, aber die Benutzeroberfläche (Canvas) wird durch Neuzeichnen gerendert.
Ich frage das, weil nur die Hälfte meines Projekts Canvas verwendet und es viele Komponenten gibt, die rein von React gerendert werden (ja, ich verwende React, aber kein Flux-Muster). Ich mag Flux nicht, weil es meiner Meinung nach etwas "überarbeitet" ist. Dann habe ich dieses Redux gefunden, das nur den Teil reduziert, den ich an Flux nicht mochte. Aber trotzdem habe ich dieses Canvas-Problem, bei dem ich nicht sicher bin, ob es sinnvoll ist, Redux zu verwenden oder nicht.
Würden Sie mir bitte ein paar Tipps oder ein kleines Code-Snippet geben, um zu helfen? Oder wenn Sie denken, dass es nicht angemessen ist, Redux in dem oben erwähnten Projekt zu verwenden, sagen Sie mir das bitte auch.
Tausend Dank!
PS ich habe mir dein Video auf youtube angeschaut (dabei reagieren Hotloader + Redux Rede). Brillant.
rui-ktei
Alle 3 Kommentare
Wenn ich Sie richtig verstehe, ist dies im Wesentlichen das gleiche Problem, auf das ich kürzlich bei der Integration von D3 mit React gestoßen bin. Ich musste das anfängliche <svg> Tag erstellen und meinen Zustand rendern, und dann, wenn sich der Zustand änderte, d3-Animationen initiieren, neue Elemente hinzufügen, Elemente entfernen usw.
Dieser StackOverflow-Artikel enthält eine Erklärung, wie Sie React dazu bringen können, Ihr <svg> -Element beim ersten Mal zu rendern (oder in Ihrem Fall <canvas> ) und React dann seine schmutzigen kleinen Finger davon fernhalten lässt, während Sie haben immer noch die Möglichkeit, die Dinge neu zu zeichnen, wenn sich der Status ändert:
Hier der Code aus dem Artikel:
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;
}
});
Das Wichtigste ist, dass shouldComponentUpdate() immer false zurückgibt, also wird React diesen Teil des DOM nach dem anfänglichen Rendern nie berühren.
Sie sollten die d3-Aufrufe einfach durch Aufrufe Ihres Rendering-Codes ersetzen können.
mindjuice
am 23. Juli 2015
@mindjuice Vielen Dank. Das hat mir auf jeden Fall geholfen. Ich bin übrigens rui-infotrack, der Autor dieser Frage. Ich habe vorher das Konto der Firma verwendet...
ktei
am 23. Juli 2015
Ich schließe, lassen Sie es mich wissen, wenn Sie weitere Informationen zu Redux benötigen.
gaearon
am 31. Juli 2015
Verwandte Themen
jimbolla
·
3Kommentare
amorphius
·
3Kommentare
ms88privat
·
3Kommentare
benoneal
·
3Kommentare
dmitry-zaets
·
3Kommentare
Hilfreichster Kommentar
Wenn ich Sie richtig verstehe, ist dies im Wesentlichen das gleiche Problem, auf das ich kürzlich bei der Integration von D3 mit React gestoßen bin. Ich musste das anfängliche
<svg>Tag erstellen und meinen Zustand rendern, und dann, wenn sich der Zustand änderte, d3-Animationen initiieren, neue Elemente hinzufügen, Elemente entfernen usw.Dieser StackOverflow-Artikel enthält eine Erklärung, wie Sie React dazu bringen können, Ihr
<svg>-Element beim ersten Mal zu rendern (oder in Ihrem Fall<canvas>) und React dann seine schmutzigen kleinen Finger davon fernhalten lässt, während Sie haben immer noch die Möglichkeit, die Dinge neu zu zeichnen, wenn sich der Status ändert:Hier der Code aus dem Artikel:
Das Wichtigste ist, dass
shouldComponentUpdate()immerfalsezurückgibt, also wird React diesen Teil des DOM nach dem anfänglichen Rendern nie berühren.Sie sollten die d3-Aufrufe einfach durch Aufrufe Ihres Rendering-Codes ersetzen können.