Redux: Jadi bagaimana cara menggunakan kesepakatan redux dengan kanvas html5

Dibuat pada 21 Jul 2015 · 3Komentar · Sumber: reduxjs/redux

Hai, Saya memiliki proyek yang memiliki area kanvas, dan saya membuat grafik (yaitu node + tepi) di salah satu dari 3 tata letak statis di atasnya. Katakanlah pada komponen lain (mungkin bilah topnav), pengguna mengklik tombol dan itu akan memicu kanvas untuk menganimasikan simpul dan tepi tersebut, memindahkannya untuk mengubahnya ke tata letak lain di antara 3.

Jadi masalah saya adalah: dalam skenario ini, tampaknya keadaan tidak akan terlalu berguna untuk merender kanvas karena itulah tugas menggambar konteks. Namun, kanvas masih memiliki "status", yang merupakan parameter tata letaknya, tetapi saya tidak ingin React me-refresh elemen kanvas HTML setelah state.layout diubah karena seperti yang saya katakan, ini adalah tugas menggambar konteks (dan saya kehilangan animasi jika saya melakukannya, karena ini adalah rendering ulang elemen HTML, bukan kanvas). Oleh karena itu, satu-satunya hal yang saya butuhkan di sini adalah pengiriman antar komponen melalui Tindakan.

Tetapi di Flux (sama untuk Redux), diharapkan untuk mengubah status untuk memicu rendering ulang UI dan UI didasarkan pada status itu sendiri. Di kanvas, Tindakan masih diharapkan memicu perubahan status tetapi UI (kanvas) dirender dengan menggambar ulang.

Saya menanyakan ini karena hanya setengah dari proyek saya yang menggunakan kanvas, dan ada banyak komponen yang murni dirender oleh React (ya, saya menggunakan React tetapi tidak menggunakan pola Flux). Saya tidak suka Flux karena menurut saya agak "direkayasa berlebihan". Kemudian saya menemukan Redux ini, yang hanya mengurangi bagian yang saya tidak suka tentang Flux. Tapi tetap saja, saya memiliki masalah kanvas ini, yang saya tidak yakin apakah bijaksana untuk menggunakan Redux atau tidak.

Maukah Anda memberi saya beberapa tip atau potongan kode kecil untuk membantu? Atau jika Anda merasa tidak pantas menggunakan Redux dalam proyek yang saya sebutkan di atas, beri tahu saya juga.

Terima kasih banyak!

PS Saya menonton video Anda di youtube (tentang yang bereaksi hot loader + Redux pidato). Cemerlang.

question

Sumber

rui-ktei

👍1

Komentar yang paling membantu

Jika saya memahami Anda dengan benar, ini pada dasarnya adalah masalah yang sama yang baru-baru ini saya temukan mengintegrasikan D3 dengan React. Saya perlu membuat tag <svg> dan merender status saya, dan kemudian saat status berubah, memulai animasi d3, menambahkan elemen baru, menghapus elemen, dll.

Artikel StackOverflow ini memberikan penjelasan tentang cara membuat React merender elemen <svg> pertama kali (atau dalam kasus Anda <canvas> , dan kemudian meminta React untuk menjauhkan jari-jari kecilnya yang kotor darinya, sementara masih memberi Anda kesempatan untuk menggambar ulang hal-hal ketika keadaan berubah:

Berikut kode dari artikel tersebut:

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

Hal utama yang perlu diperhatikan adalah shouldComponentUpdate() selalu mengembalikan false , jadi React tidak akan pernah menyentuh bagian DOM itu setelah render awal.

Anda seharusnya dapat mengganti panggilan d3 dengan panggilan ke kode rendering Anda.

mindjuice pada 23 Jul 2015

👍4

Semua 3 komentar

Berikut kode dari artikel tersebut:

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

Hal utama yang perlu diperhatikan adalah shouldComponentUpdate() selalu mengembalikan false , jadi React tidak akan pernah menyentuh bagian DOM itu setelah render awal.

Anda seharusnya dapat mengganti panggilan d3 dengan panggilan ke kode rendering Anda.

mindjuice pada 23 Jul 2015

👍4

@mindjuice Terima kasih banyak. Ini pasti membantu saya. Omong-omong, saya rui-infotrack, penulis pertanyaan ini. Saya menggunakan akun perusahaan sebelumnya...