Redux tanpa bertindak balas

Artikel ini disemak semula oleh Vildan Softic. Terima kasih kepada semua pengulas rakan sebaya di SitePoint untuk membuat kandungan SitePoint sempurna!

Saya jenis pemaju yang suka bermula dari awal dan memahami bagaimana semuanya berfungsi. Walaupun saya tahu ini membawa diri saya beban kerja (tidak perlu), ia membantu saya menghargai dan memahami mekanisme di sebalik kerangka, perpustakaan, atau modul tertentu.

Baru -baru ini, saya telah mengalami masa ini sekali lagi dan mula membangunkan aplikasi web menggunakan Redux dan JavaScript Pure. Dalam artikel ini, saya ingin menggariskan struktur permohonan saya, meneliti lelaran awal saya (akhirnya gagal), dan kemudian melihat penyelesaian yang akhirnya saya pilih dan apa yang saya pelajari di sepanjang jalan.

mata utama

Redux boleh menggunakan JavaScript tulen untuk menguruskan keadaan aplikasi tanpa bergantung pada React, menunjukkan fleksibiliti dalam pengurusan negeri dalam lapisan UI yang berbeza.
Adalah penting untuk memulakan dan menguruskan penyimpanan redux dengan betul;
Dalam tetapan Redux sahaja, komponen boleh sama dengan struktur komponen React, dibahagikan kepada pembentangan dan lapisan kontena, yang membantu memisahkan kebimbangan dan menjelaskan definisi peranan.
Tidak seperti DOM maya React (yang secara automatik mengendalikan perubahan UI berdasarkan kemas kini status), apabila menggunakan JavaScript dan Redux tulen, DOM perlu dikemas kini secara manual.
Adalah disyorkan untuk melaksanakan penggunaan storan yang didorong oleh kes untuk memastikan bahawa hanya data yang diperlukan disimpan, yang dapat meningkatkan prestasi dan pengalaman pengguna dengan mengelakkan kegigihan negara yang tidak perlu.

Tetapan

Anda mungkin pernah mendengar gabungan react.js dan redux popular yang menggunakan teknologi front-end terkini untuk membina aplikasi web yang cepat dan berkuasa.

React adalah perpustakaan sumber terbuka berasaskan komponen yang dicipta oleh Facebook untuk membina antara muka pengguna. Walaupun React hanyalah lapisan pandangan (

bukan rangka kerja lengkap seperti sudut atau ember ), Redux menguruskan keadaan permohonan. Ia bertindak sebagai bekas negara yang boleh diramal di mana seluruh negeri disimpan dalam satu pokok objek tunggal dan hanya boleh diubah dengan mengeluarkan tindakan . Jika anda tidak memahami topik ini sama sekali, saya cadangkan anda membaca artikel ini. Untuk seluruh artikel ini, anda tidak perlu menjadi pakar Redux, tetapi sekurang -kurangnya ia akan membantu untuk memahami konsepnya.

redux bebas reaksi-aplikasi dari awal

Kelebihan Redux adalah bahawa ia memaksa anda untuk berfikir lebih awal dan memahami reka bentuk permohonan anda seawal mungkin. Anda mula menentukan apa yang sebenarnya perlu disimpan, data apa yang boleh dan harus diubah, dan komponen mana yang boleh mengakses storan. Tetapi sejak Redux hanya memberi tumpuan kepada keadaan, saya mendapati diri saya sedikit keliru tentang cara membina dan menyambungkan seluruh permohonan. React melakukan tugas yang baik untuk membimbing anda melalui semua langkah, tetapi tanpa itu, saya perlu memikirkan apa yang paling sesuai.

Aplikasi yang dipersoalkan adalah klon Tetris pertama mudah alih dengan beberapa pandangan yang berbeza. Logik permainan sebenar dilakukan di Redux, sementara fungsi luar talian disediakan oleh LocalStorage dan pemprosesan paparan tersuai. Repositori ini boleh didapati di GitHub, walaupun aplikasinya masih dalam perkembangan aktif dan saya menulis artikel ini semasa pembangunan.

Tentukan Senibina Aplikasi

Saya memutuskan untuk mengadopsi struktur folder yang biasa dalam projek Redux dan React. Ini adalah struktur logik yang berfungsi untuk pelbagai tetapan yang berbeza. Terdapat banyak variasi topik ini, kebanyakan projek sedikit berbeza, tetapi struktur keseluruhan adalah sama.

<code>actions/
├── game.js
├── score.js
└── ...
components/
├── router.js
├── pageControls.js
├── canvas.js
└── ...
constants/
├── game.js
├── score.js
└── ...
reducers/
├── game.js
├── score.js
└── ...
store/
├── configureStore.js
├── connect.js
└── index.js
utils/
├── serviceWorker.js
├── localStorage.js
├── dom.js
└── ...
index.js
worker.js</code>

Tag saya dipisahkan ke dalam direktori lain dan akhirnya diberikan oleh satu fail index.html tunggal. Struktur ini sama dengan skrip/ untuk mengekalkan seni bina yang konsisten di seluruh asas kod.

src/markup/

<code>layouts/
└── default.html
partials/
├── back-button.html
└── meta.html
pages/
├── about.html
├── settings.html
└── ...
index.html</code>

Menguruskan dan menyimpulkan penyimpanan

Untuk mengakses storan, anda perlu membuat dan menyampaikannya kepada semua contoh permohonan sekali. Kebanyakan kerangka menggunakan beberapa jenis suntikan ketergantungan, jadi kami sebagai pengguna kerangka tidak perlu menghasilkan penyelesaian sendiri. Tetapi apabila saya menggunakan penyelesaian saya sendiri, bagaimana saya boleh menjadikannya tersedia untuk semua komponen saya?

lelaran pertama saya gagal. Saya tidak tahu mengapa saya fikir ini adalah idea yang baik, tetapi saya meletakkan storan dalam modulnya sendiri (skrip/kedai/indeks.js) yang kemudiannya boleh diimport oleh seluruh aplikasi. Saya akhirnya menyesal dan dengan cepat menangani kebergantungan bulat. Masalahnya ialah apabila komponen cuba mengakses storan, storan tidak dimulakan dengan betul. Saya membuat carta untuk menunjukkan aliran ketergantungan yang sedang saya jalankan:

Titik kemasukan aplikasi memulakan semua komponen dan kemudian menggunakan storan secara dalaman sama ada secara langsung atau melalui fungsi penolong (di sini dirujuk sebagai

Connect

). Walau bagaimanapun, kerana storan tidak dibuat secara eksplisit, tetapi hanya kesan sampingan dalam modulnya sendiri, komponen itu berakhir dengan menggunakan storan sebelum dibuat. Tiada kawalan ke atas masa apabila fungsi komponen atau penolong pertama kali dipanggil untuk disimpan. Ini sangat mengelirukan. modul penyimpanan adalah seperti berikut:

Skrip/Store/Index.js

(☓ Bad)

Seperti yang disebutkan di atas, storan dibuat sebagai kesan sampingan dan kemudian dieksport. Fungsi penolong juga perlu disimpan.

import { createStore } from 'redux'
import reducers from '../reducers'

const store = createStore(reducers)

export default store
export { getItemList } from './connect'

Skrip/Store/Connect.js

(☓ Bad)

Ini adalah tepat ketika komponen saya akhirnya berulang antara satu sama lain. Fungsi penolong memerlukan penyimpanan untuk dijalankan dan dieksport dari fail inisialisasi storan pada masa yang sama supaya mereka dapat mengakses bahagian lain aplikasi. Adakah anda melihat bagaimana keadaan ini tidak kemas?

import store from './'

export function getItemList () {
  return store.getState().items.all
}

Penyelesaian

Nampaknya jelas sekarang, dan saya mengambil sedikit masa untuk memahami. Saya menyelesaikan ini dengan memindahkan permulaan ke titik kemasukan aplikasi saya (skrip/indeks.js) dan lulus ke semua komponen yang diperlukan.

Sekali lagi, ini sangat mirip dengan bagaimana React sebenarnya menjadikan penyimpanan boleh diakses (lihat kod sumber). Ada sebab mereka bekerja dengan baik bersama -sama, mengapa tidak mempelajari konsepnya?

Titik kemasukan aplikasi pertama kali membuat storan dan kemudian lulus kepada semua komponen. Komponen kemudian boleh menyambung ke operasi storan dan jadual, melanggan perubahan, atau mendapatkan data tertentu.

mari kita lihat perubahan:

skrip/kedai/configurestore.js

(✓ baik)

Saya menyimpan modul, tetapi sebaliknya mengeksport fungsi yang dipanggil ConfigureStore yang mewujudkan penyimpanan di tempat lain di pangkalan kod.

Perhatikan bahawa ini hanyalah konsep asas;

<code>actions/
├── game.js
├── score.js
└── ...
components/
├── router.js
├── pageControls.js
├── canvas.js
└── ...
constants/
├── game.js
├── score.js
└── ...
reducers/
├── game.js
├── score.js
└── ...
store/
├── configureStore.js
├── connect.js
└── index.js
utils/
├── serviceWorker.js
├── localStorage.js
├── dom.js
└── ...
index.js
worker.js</code>

Skrip/Store/Connect.js (✓ Baik)

Sambungkan fungsi penolong pada dasarnya tidak berubah, tetapi kini storan perlu diluluskan sebagai parameter. Pada mulanya saya teragak -agak untuk menggunakan penyelesaian ini kerana saya fikir "jadi apa fungsi penolong?" Sekarang saya fikir mereka cukup baik dan cukup maju untuk menjadikan semuanya lebih mudah dibaca.

<code>layouts/
└── default.html
partials/
├── back-button.html
└── meta.html
pages/
├── about.html
├── settings.html
└── ...
index.html</code>

skrip/index.js

Ini adalah titik masuk aplikasi. Kedai dicipta dan diserahkan kepada semua komponen. PageControls menambah pendengar acara global untuk butang tindakan tertentu, dan Tetrisgame adalah komponen permainan sebenar. Ia kelihatan pada dasarnya sama sebelum memindahkan storan di sini, tetapi tidak lulus storan secara berasingan ke semua modul. Seperti yang dinyatakan sebelum ini, komponen boleh mengakses storan melalui kaedah sambungan saya yang gagal.

komponen

import { createStore } from 'redux'
import reducers from '../reducers'

const store = createStore(reducers)

export default store
export { getItemList } from './connect'

Saya memutuskan untuk menggunakan dua komponen:

lapisan persembahan dan komponen kontena

. Komponen persembahan tidak melakukan apa -apa tetapi pemprosesan DOM tulen; Sebaliknya, komponen kontena boleh menjadualkan tindakan atau melanggan perubahan.

Dan Abramov telah menulis artikel hebat untuk komponen React, tetapi kaedah ini juga boleh digunakan untuk mana -mana seni bina komponen lain. Walau bagaimanapun, terdapat pengecualian untuk saya. Kadang -kadang komponennya sangat kecil dan hanya melakukan satu perkara. Saya tidak mahu memisahkannya ke salah satu corak di atas, jadi saya memutuskan untuk mencampurinya. Jika komponen tumbuh dan mendapat lebih banyak logik, saya akan memisahkannya. skrip/komponen/pagecontrols.js

Contoh di atas adalah salah satu komponen. Ia mempunyai senarai elemen (dalam kes ini semua elemen dengan atribut tindakan-tindakan) dan tindakan jadual apabila diklik berdasarkan kandungan atribut. Itu sahaja. Modul lain kemudian boleh mendengar perubahan dalam penyimpanan dan mengemas kini diri mereka dengan sewajarnya. Seperti yang dinyatakan sebelum ini, jika komponen juga mempunyai kemas kini DOM, saya akan memisahkannya.

Sekarang, izinkan saya menunjukkan kepada anda pemisahan yang jelas dari kedua -dua jenis komponen ini.

import store from './'

export function getItemList () {
  return store.getState().items.all
}

kemas kini dom

Masalah yang lebih besar yang saya ada ketika saya memulakan projek adalah bagaimana untuk mengemas kini DOM. React menggunakan perwakilan dalam memori yang cepat DOM yang dipanggil DOM maya untuk meminimumkan kemas kini DOM.

saya sebenarnya berfikir untuk melakukan perkara yang sama, jika permohonan saya semakin besar dan Dom lebih membosankan, saya mungkin beralih ke dom maya, tetapi sekarang saya sedang melakukan operat Dom Classic , yang mana Bekerja dengan baik dengan Redux.

Proses asas adalah seperti berikut:

• memulakan contoh baru komponen kontena dan lulus storan untuk kegunaan dalaman
• Perubahan dalam Penyimpanan Langganan Komponen
• dan membuat kemas kini di DOM menggunakan komponen lapisan persembahan yang berbeza

NOTA: Saya peminat awalan simbol $ untuk apa -apa yang berkaitan dengan DOM dalam JavaScript. Seperti yang anda rasa, ia diambil dari $ JQuery's $. Oleh itu, nama fail komponen persembahan tulen diawali dengan tanda dolar.

skrip/index.js

<code>actions/
├── game.js
├── score.js
└── ...
components/
├── router.js
├── pageControls.js
├── canvas.js
└── ...
constants/
├── game.js
├── score.js
└── ...
reducers/
├── game.js
├── score.js
└── ...
store/
├── configureStore.js
├── connect.js
└── index.js
utils/
├── serviceWorker.js
├── localStorage.js
├── dom.js
└── ...
index.js
worker.js</code>

Tidak ada yang mewah di sini. Import, Buat, dan Inisialisasi SCOREBSERVER SCOREBSERVER. Apa sebenarnya yang dilakukannya? Ia mengemas kini semua elemen paparan yang berkaitan dengan skor: Senarai skor tinggi dan maklumat skor semasa semasa permainan.

skrip/komponen/scorobserver/index.js

<code>layouts/
└── default.html
partials/
├── back-button.html
└── meta.html
pages/
├── about.html
├── settings.html
└── ...
index.html</code>

ingat, ini adalah komponen yang mudah; Apa yang berlaku di sini? Komponen scorobserver menjimatkan rujukan dalaman ke storan dan mewujudkan dua komponen peringkat persembahan contoh baru untuk kegunaan kemudian. Kaedah INIT melanggan kemas kini penyimpanan dan mengemas kini komponen label $ setiap kali storan berubah - tetapi hanya jika permainan sebenarnya berjalan.

Kaedah Kemas kiniCorboard digunakan di tempat lain. Tidak masuk akal untuk mengemas kini senarai setiap kali perubahan berlaku, kerana pandangan itu tidak aktif pula. Terdapat juga komponen penghalaan yang mengemas kini atau menyahaktifkan komponen yang berbeza setiap kali perubahan pandangan. APInya kira -kira seperti berikut:

import { createStore } from 'redux'
import reducers from '../reducers'

const store = createStore(reducers)

export default store
export { getItemList } from './connect'

Nota: $ (dan $$) bukan rujukan jQuery, tetapi pintasan utiliti yang mudah untuk Document.QuerySelector.

skrip/komponen/scorobserver/$ board.js

import store from './'

export function getItemList () {
  return store.getState().items.all
}

Sekali lagi, ini adalah contoh asas dan komponen asas. Kaedah UpdateBoard () mengambil array, melangkah ke atasnya, dan memasukkan kandungan ke dalam senarai skor.

skrip/komponen/scorobserver/$ label.js

import { createStore } from 'redux'
import reducers from '../reducers'

export default function configureStore () {
  return createStore(reducers)
}

Komponen ini hampir sama seperti papan skor di atas, tetapi hanya mengemas kini elemen tunggal.

Kesalahan dan cadangan lain

Satu lagi perkara penting ialah melaksanakan menggunakan penyimpanan yang didorong oleh kes. Saya fikir penting untuk menyimpan kandungan yang penting untuk permohonan itu. Pada mulanya, saya hampir menyimpan segala -galanya: pandangan aktif semasa, tetapan permainan, skor, kesan hover, mod pernafasan pengguna dan sebagainya.

Walaupun ini mungkin berkaitan dengan satu aplikasi, ia tidak ada kaitan dengan yang lain. Mungkin bagus untuk menyimpan pandangan semasa dan terus di tempat yang sama apabila dimuat semula, tetapi dalam kes saya ia merasakan pengalaman pengguna yang buruk dan lebih menjengkelkan daripada berguna. Anda tidak mahu menyimpan menu atau suis modal, bukan? Mengapa pengguna perlu kembali ke keadaan tertentu itu? Dalam aplikasi web yang lebih besar, ini mungkin masuk akal. Tetapi dalam permainan fokus permainan mudah alih kecil saya, kembali ke skrin tetapan hanya kerana saya pergi dari sana, yang cukup menjengkelkan.

Kesimpulan

Saya telah melakukan projek Redux saya dengan dan tanpa bertindak balas, dan pengambilan utama saya adalah bahawa perbezaan besar dalam reka bentuk aplikasi tidak diperlukan. Kebanyakan kaedah yang digunakan dalam React sebenarnya boleh sesuai dengan mana -mana tetapan pemprosesan pandangan lain. Saya mengambil masa untuk menyedari ini kerana saya fikir pada mulanya saya terpaksa melakukan sesuatu yang berbeza, tetapi saya akhirnya mendapati ia tidak perlu. Walau bagaimanapun, apa yang berbeza ialah bagaimana anda memulakan modul, bagaimana anda menyimpannya, dan sejauh mana komponen memahami keadaan aplikasi keseluruhan. Konsep ini tetap sama, tetapi pelaksanaan dan jumlah kod adalah sempurna untuk keperluan anda.

Redux adalah alat yang hebat yang membantu membina aplikasi anda dengan cara yang lebih bijak. Menggunakannya sendiri tanpa sebarang galeri paparan boleh menjadi sangat rumit pada mulanya, tetapi apabila anda mengatasi kekeliruan awal, tiada apa yang dapat menghalang anda.

Apa pendapat anda mengenai kaedah saya? Adakah anda menggunakan redux dan pandangan yang berbeza untuk mengendalikan tetapan sahaja? Saya suka mendengar daripada anda dan membincangkannya dalam komen.

Jika anda ingin mengetahui lebih lanjut mengenai Redux, lihat kursus kami "Menulis semula dan menguji Redux untuk menyelesaikan masalah reka bentuk" Kursus mini. Dalam kursus ini, anda akan membina aplikasi Redux yang menerima tweet yang dianjurkan oleh topik melalui sambungan WebSocket. Untuk memberi anda idea tentang apa yang akan berlaku, lihat kursus percuma di bawah.

---

Memuatkan pemain ... FAQ pada Redux Bebas React (FAQ)

Apakah perbezaan utama antara menggunakan Redux dan React dan tidak menggunakan React?

Redux adalah bekas keadaan yang boleh diramal untuk aplikasi JavaScript yang boleh digunakan dengan mana -mana lapisan UI. Perbezaan utama antara menggunakan Redux vs React dan tidak menggunakan React adalah bagaimana lapisan UI berinteraksi dengan penyimpanan Redux. Apabila digunakan dengan React, Redux boleh memanfaatkan seni bina berasaskan komponen React dan pendekatan kitaran hayatnya untuk mengendalikan kemas kini komponen secara automatik apabila perubahan keadaan dibuat. Tanpa React, anda perlu melanggan secara manual penyimpanan dan mengendalikan kemas kini ke UI apabila status berubah.

Bagaimana menangani operasi tak segerak di Redux tanpa bertindak balas?

Operasi Asynchronous di Redux biasanya dikendalikan menggunakan middleware seperti Redux Thunk atau Redux Saga. Middleware ini membolehkan anda menjadualkan fungsi (Thunks) atau lebih banyak operasi asynchronous (SAGA), bukannya objek biasa. Walaupun tanpa React, anda masih boleh menggunakan middleware ini dalam penyimpanan Redux. Anda hanya perlu memohon middleware semasa membuat storan menggunakan fungsi ApplyMidDleWare Redux.

Bolehkah saya menggunakan redux devtools tanpa bertindak balas?

Ya, redux devtools tidak bergantung kepada reaksi dan boleh digunakan dengan mana -mana lapisan UI yang menggunakan redux. Anda boleh mengintegrasikan Redux Devtools ke dalam aplikasi anda dengan menambahkannya sebagai middleware ketika membuat storan Redux. Ini akan membolehkan anda menyemak status dan tindakan permohonan anda dalam masa nyata, walaupun tanpa bertindak balas.

bagaimana untuk menyambung ke penyimpanan redux dalam komponen UI saya tanpa bertindak balas?

Tanpa React dan Fungsi Sambungannya, anda perlu melanggan secara manual penyimpanan Redux dan mengemas kini komponen UI apabila keadaan berubah. Anda boleh melanggan kedai menggunakan kaedah Store.Subscribe, yang mengambil fungsi pendengar yang akan dipanggil setiap kali operasi dijadualkan. Dalam fungsi pendengar ini, anda boleh menggunakan Store.getState untuk mendapatkan keadaan semasa penyimpanan dan mengemas kini komponen UI dengan sewajarnya.

Bolehkah saya menggunakan Redux dengan perpustakaan atau kerangka lain seperti Vue atau Angular?

Ya, Redux tidak bergantung pada React dan boleh digunakan dengan mana -mana lapisan UI. Bagi perpustakaan dan kerangka lain seperti Vue dan Angular, pengikatan disediakan yang menyediakan fungsi yang sama kepada fungsi Connect React. Pengikatan ini membolehkan anda dengan mudah menyambungkan komponen UI ke penyimpanan redux dan mengendalikan kemas kini komponen apabila keadaan berubah.

Bagaimana untuk menguji kod redux saya tanpa bertindak balas?

Menguji kod redux tanpa React adalah serupa dengan menguji dengan bertindak balas. Anda boleh membuat ujian unit untuk pencipta dan pengurangan tindakan anda menggunakan rangka kerja ujian JavaScript seperti Jest atau Mocha. Untuk menguji operasi asynchronous, anda boleh menggunakan penyimpanan mock untuk mensimulasikan penyimpanan redux.

bagaimana menangani kesan sampingan di redux tanpa bertindak balas?

Kesan sampingan di redux biasanya dikendalikan menggunakan middleware seperti Redux Thunk atau Redux Saga. Middleware ini membolehkan anda menjadualkan fungsi dengan kesan sampingan atau operasi tak segerak yang lebih kompleks, seperti membuat panggilan API. Walaupun tanpa React, anda masih boleh menggunakan middleware ini dalam penyimpanan Redux.

Bolehkah saya menggunakan redux dengan javascript tulen?

Ya, Redux boleh digunakan dengan JavaScript tulen. Anda boleh membuat kedai Redux, menjadualkan tindakan kepadanya, dan melanggan perubahan dalam keadaan menggunakan hanya JavaScript tulen. Walau bagaimanapun, jika tidak ada perpustakaan atau rangka kerja seperti React untuk mengendalikan kemas kini ke UI, anda perlu mengemas kini komponen UI secara manual apabila keadaan berubah.

bagaimana membina kod redux tanpa bertindak balas?

Struktur kod redux tidak bergantung kepada sama ada anda menggunakan React. Anda masih boleh mengikuti amalan terbaik yang sama untuk membina kod Redux, seperti memisahkan operasi, pengurangan, dan pemilih ke dalam fail atau folder yang berbeza dan menganjurkan keadaan anda dengan cara yang normal dan modular.

Bolehkah saya menggunakan middleware redux tanpa bertindak balas?

Ya, middleware Redux tidak bergantung pada reaksi dan boleh digunakan dengan mana -mana lapisan UI yang menggunakan Redux. Middleware di Redux digunakan untuk mengendalikan kesan sampingan dan operasi tak segerak, dan sebagainya. Anda boleh menggunakan Redux memohon middleware ke storan redux anda menggunakan fungsi ApplyMidDleware Redux, sama ada anda menggunakan React atau tidak.

Atas ialah kandungan terperinci Redux tanpa bertindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!