Redux: だから、html5キャンバスでredux取引を使用する方法

作成日 2015年07月21日 · 3コメント · ソース: reduxjs/redux

こんにちは。キャンバス領域のあるプロジェクトがあり、3つの静的レイアウトのいずれかでグラフ（ノード+エッジ）をレンダリングします。別のコンポーネント（おそらくトップナビゲーションバー）について言うと、ユーザーはボタンをクリックし、キャンバスをトリガーしてそれらのノードとエッジをアニメーション化し、それらを移動して3つの中の別のレイアウトに変更する必要があります。

したがって、私の問題は次のとおりです。このシナリオでは、コンテキストを描画する作業であるため、状態はキャンバスをレンダリングするにはあまり有用ではないようです。ただし、キャンバスにはレイアウトパラメータである「状態」がまだありますが、 state.layoutが変更された後、ReactでHTMLキャンバス要素を更新したくないのは、前述したように、描画の仕事だからです。コンテキスト（これを行うとアニメーションが失われます。これは、キャンバスではなくHTML要素の再レンダリングであるためです）。したがって、ここで必要なのは、アクションを介したコンポーネント間のディスパッチだけです。

ただし、Flux（Reduxでも同じ）では、状態を変更してUIの再レンダリングをトリガーすることが期待されており、UIは状態自体に基づいています。キャンバスでは、アクションは引き続き状態の変更をトリガーすることが期待されますが、UI（キャンバス）は再描画によってレンダリングされます。

プロジェクトの半分だけがキャンバスを使用していて、Reactによって純粋にレンダリングされるコンポーネントがたくさんあるので、これを求めています（はい、Reactを使用していますが、Fluxパターンは使用していません）。私の意見では、Fluxは少し「過剰に設計されている」ので、私はFluxが嫌いです。それから私はこのReduxを見つけました。これは私がFluxについて嫌いな部分を減らすだけです。しかし、それでも、私はこのキャンバスの問題を抱えています。Reduxを使用するのが賢明かどうかはわかりません。

役立つヒントや小さなコードスニペットを教えてください。または、上記のプロジェクトでReduxを使用するのが適切でないと思われる場合は、それも教えてください。

どうもありがとう！

PS私はあなたのビデオをyoutubeで見ました（ホットローダー+ Reduxスピーチに反応することに関して）。鮮やかさ。

question

ソース

rui-ktei

👍1

最も参考になるコメント

私があなたを正しく理解していれば、これは基本的に、D3とReactの統合で最近遭遇した問題と同じです。最初の<svg>タグを作成して状態をレンダリングし、状態が変化したら、d3アニメーションを開始し、新しい要素を追加し、要素を削除する必要がありました。

このStackOverflowの記事では、Reactに<svg>要素を最初にレンダリングする方法（または、あなたの場合は<canvas>をレンダリングしてから、Reactに汚れた小指を近づけないようにする方法）について説明します。状態が変化したときに物事を再描画する機会をまだ与えています：

記事のコードは次のとおりです。

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

注意すべき重要な点は、 shouldComponentUpdate()常にfalse返すため、Reactは最初のレンダリング後にDOMのその部分に触れることはありません。

d3呼び出しをレンダリングコードの呼び出しに置き換えることができるはずです。

mindjuice 2015年07月23日

👍4

全てのコメント3件

記事のコードは次のとおりです。

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

注意すべき重要な点は、 shouldComponentUpdate()常にfalse返すため、Reactは最初のレンダリング後にDOMのその部分に触れることはありません。

d3呼び出しをレンダリングコードの呼び出しに置き換えることができるはずです。

mindjuice 2015年07月23日

👍4

@mindjuiceありがとうございます。これは間違いなく私を助けました。ちなみに、私はこの質問の作者であるrui-infotrackです。以前は会社のアカウントを使用していました...

ktei 2015年07月23日

締めくくりです。Reduxについて必要な情報が他にあるかどうかお知らせください。

gaearon 2015年07月31日

このページは役に立ちましたか？

0 / 5 - 0 評価

Redux: だから、html5キャンバスでredux取引を使用する方法

最も参考になるコメント

全てのコメント3件

関連する問題