Berkongsi Keadaan Antara Vanila dan Aplikasi React dengan Redux

Penyataan masalah

Saya ingin berkongsi keadaan data biasa antara vanilla js dan apl bertindak balas.

Apa yang ada dalam POC ini

• Kami akan mencipta dua apl kaunter serupa dalam vanila dan bertindak balas.
• Bilangan hendaklah disimpan dalam keadaan biasa
• Jika kita mengemas kini kiraan dalam vanila, ia harus ditunjukkan dalam reaksi dan sebaliknya

Struktur Projek

Projek kami dibahagikan kepada dua bahagian utama:

1. Direktori Root: Mengandungi fail teras untuk bahagian JavaScript vanila apl.
2. Direktori react-mf: Menempatkan bahagian hadapan mikro React yang berinteraksi dengan bahagian JavaScript vanila.

Seni bina apl boleh disemak di pautan di sini

Fail Utama dan Peranannya

Direktori Akar

• index.html: Ini ialah titik masuk apl kami, menyediakan struktur HTML dan termasuk pautan ke helaian gaya dan fail JavaScript. Ia menampilkan dua elemen div utama dengan id="app" dan id="root", yang digunakan untuk memasang apl JS vanila dan bahagian hadapan mikro React, masing-masing.

• main.js: Bertindak sebagai fail JavaScript utama untuk memulakan bahagian JS vanila apl. Ia mengendalikan logik teras dan berinteraksi dengan keadaan dikongsi.

• counter.js: Mengandungi kod yang bertanggungjawab untuk menghantar tindakan ke kedai Redux. Sebagai contoh, ia menghantar tindakan INCREMENT untuk mengemas kini kaunter.

• store.js: Menyediakan gedung Redux, yang menguruskan keadaan aplikasi dan memastikan konsistensi antara JS vanila dan bahagian React apl.

Direktori react-mf

• App.jsx: Komponen React utama bagi bahagian hadapan mikro kami. Ia menggunakan cangkuk useState untuk pengurusan negeri tempatan dan melanggan kedai Redux untuk mencerminkan keadaan global. Ia memaparkan butang untuk menghantar tindakan INCREMENT dan memaparkan kiraan semasa dari kedai.

• main.jsx: Titik masuk untuk bahagian hadapan mikro React, tempat apl React dimulakan dan dipaparkan.

Anda boleh mendapatkan kod penuh dalam repositori GitHub.

Atas ialah kandungan terperinci Berkongsi Keadaan Antara Vanila dan Aplikasi React dengan Redux. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!