Pengenalan kepada Redux-Logic

Artikel ini akan melalui tinjauan umum mengenai Redux-Logic. Kami akan melihat apa itu, mengapa ia diperlukan, bagaimana ia berbeza dengan alat tengah Redux yang lain dan mengapa saya fikir ia adalah pilihan terbaik. Kami kemudian akan melihat contoh aplikasi Cuaca sederhana untuk menunjukkan bagaimana konsep teras dipraktikkan.

Artikel ini menganggap anda mempunyai pemahaman yang baik mengenai React dan Redux.

Penyegaran pantas pada Redux

Redux adalah wadah keadaan untuk aplikasi JavaScript dan biasanya digunakan dengan React. Ini menyediakan tempat terpusat untuk menyimpan data yang digunakan di seluruh aplikasi anda. Redux juga menyediakan kerangka untuk membuat mutasi keadaan yang dapat diramalkan . Menggunakan Redux menjadikannya lebih mudah untuk menulis, memahami, men-debug dan menskalakan aplikasi berdasarkan data dan dinamik.

Di Redux, komponen memanggil pembuat tindakan yang menghantar tindakan . Tindakan adalah (biasanya!) Objek biasa kecil yang menyatakan maksud atau arahan. Tindakan itu juga boleh mengandungi 'muatan' (iaitu data).

Keadaan aplikasi diuruskan oleh pengurang . Kedengarannya lebih rumit daripada mereka! Tindakan dikendalikan oleh pengurang akar yang kemudian meneruskan tindakan dan muatan ke pengurang tertentu. Pengurangan ini akan mengambil salinan negeri permohonan itu, bermutasi yang salinan (mengikut tindakan dan muatan yang) dan kemudian mengemas kini negeri ini dalam permohonan itu Store .

Mengapa perlunya Redux Logic?

Secara lalai, semua tindakan di Redux dihantar secara serentak. Ini memberikan cabaran untuk setiap aplikasi yang perlu menyokong tingkah laku asinkron seperti mengambil data dari API ... begitu banyak aplikasi!

Untuk menangani tingkah laku async menggunakan Redux, kita memerlukan beberapa jenis middleware yang melakukan beberapa proses antara ketika tindakan dihantar dan ketika tindakan mencapai reducers. Terdapat beberapa perpustakaan popular untuk menyediakan fungsi ini.

Setelah meneroka pelbagai pilihan, saya telah menggunakan Redux-Logic dalam pelbagai projek untuk sementara waktu dan mendapati ia hebat!

Kitaran hidup Redux-Logic

Redux-Logic menyediakan alat tengah yang melakukan beberapa pemprosesan antara ketika tindakan dikirim dari komponen dan ketika tindakan mencapai pengurang.

Kami menggunakan perpustakaan redux-logic untuk membuat 'Logic'. Ini pada dasarnya adalah fungsi yang memintas tindakan objek biasa , melakukan pemprosesan tak segerak dan kemudian menghantar tindakan objektif biasa . Fungsi logik benar-benar bersifat deklaratif dan fleksibel, seperti yang akan kita lihat!

Perkara penting yang perlu diambil di sini adalah bahawa semua tindakan yang digunakan oleh Redux-Logic adalah objek biasa . Tindakan yang dikirim oleh komponen UI dan tindakan yang kemudian dikirim oleh Logik akan selalu menjadi objek biasa (sebagai lawan, misalnya, fungsi). Kami akan melihatnya di bawah ini apabila kami membandingkan pelbagai pilihan alat tengah.

Di bawah tudung, Redux-Logic menggunakan 'pengamatan' dan pengaturcaraan reaktif. Baca lebih lanjut mengenai perkara ini di sini.

Aliran data

Di bawah ini, sebagai perbandingan, adalah rajah yang saya buat yang menunjukkan titik-titik penting dalam kitaran hidup proses redux segerak. Tidak ada alat tengah yang disertakan (kerana tidak diperlukan!).

Sekarang di sini adalah gambarajah yang menunjukkan bahagian-bahagian penting dalam projek yang menggunakan perpustakaan redux-logic untuk menangani tindakan tidak segerak. Perkara ini berguna untuk dirujuk kemudian bersama contoh di bawah.

Anda dapat melihat bagaimana alat tengah beroperasi di antara ketika tindakan dihantar dan ketika ia dikendalikan oleh pengurang.

Perbezaan utama dari penyelesaian lain

Redux-Thunk adalah pilihan yang popular untuk perisian tengah Redux yang juga membolehkan anda menyokong tingkah laku tidak segerak. Untuk menangani tingkah laku tidak segerak menggunakan Redux-Thunk, tindakan anda pencipta harus mengembalikan fungsi berbanding mengembalikan objek biasa dengan Redux-Logic. Saya percaya bahawa menghantar objek biasa dengan Redux-Logic menjadikan kod anda lebih mudah ditulis dan lebih mudah difahami.

Tambahan pula, saya percaya pendekatan 'objek biasa' untuk menangani tingkah laku asinkron lebih sesuai dengan senibina Redux (segerak) yang lain, yang menjadikan alat tengah ini sesuai dengan lebih organik dengan Redux.

Satu lagi alat tengah Redux yang popular ialah Redux-Saga . Saya mendapati kelengkungan belajar untuk mendapatkan sagas (ciri ES6 yang agak baru) agak curam ketika saya melihat pilihan ini. Ini akan bertambah buruk jika anda ingin memperkenalkan perpustakaan ini ke dalam aplikasi yang dikendalikan oleh pasukan dengan beberapa orang. Selain itu, saya berpendapat bahawa jika mereka tidak dikendalikan dengan baik, maka sagas dapat membuat kod yang kelihatan rumit berbanding dengan Logik yang anda buat dengan redux-logic. Ini boleh mempengaruhi kelajuan pengembangan dan pemeliharaan kod.

Gambaran keseluruhan contoh

Berikut adalah petikan ringkas dari aplikasi React yang mudah yang dapat mengambil kira keadaan cuaca semasa di bandar dan membentangkannya kepada pengguna. Contohnya menggunakan Redux-Logic untuk menyokong tingkah laku tidak segerak untuk mengambil data menggunakan OpenWeatherMap API percuma.

Sebagai perbandingan, saya telah memasukkan proses Redux segerak yang memaparkan jumlah permintaan yang dibuat oleh pengguna.

Inilah kod sumber.

Menetapkan persekitaran pembangunan

Ini adalah arahan yang saya jalankan untuk mula membuat aplikasi saya:

npx create-react-app appnpm install --save reduxnpm install --save react-reduxnpm install --save redux-logicnpm install --save axios

Dan untuk melihat aplikasinya:

npm start

Gembira kerana saya dapat melihat laman web Buat React App lalai di localhost: 3000 , saya kemudian mula menulis beberapa kod!

Berikut adalah coretan kod yang menunjukkan perkara penting mengenai penyatuan Redux-Logic ke dalam projek.

Menambah middleware ke kedai Redux kami

Di appStore.js , jika kita tidak menggunakan middleware, biasanya kita hanya akan memberikan pengurang root kepada kaedah createStore. Di sinilah kami menghubungkan perisian tengah Redux-Logic kami ke seluruh aplikasi kami.

Kami menyatakan bahawa kami ingin menggunakan axios sebagai pelanggan kami untuk membuat permintaan HTTP.

Kami kemudian menggunakan kaedah dari redux-logic untuk membuat middleware kami dan akhirnya kami menambahkannya sebagai parameter pada kaedah createStore. Ini bermaksud kod Redux kami akan dapat mengakses perisian tengah kami. Hebat!

Menghantar tindakan tidak segerak

Dengan Redux-Logic, tindakan yang mencetuskan tingkah laku tak segerak dihantar dengan cara yang sama seperti tindakan yang mencetuskan kemas kini keadaan segerak. Tidak ada yang berbeza!

Untuk kelengkapan, anda dapat melihat di bawah bahawa apabila pengguna mengklik butang, kami memanggil pembuat tindakan yang telah diteruskan ke komponen kami sebagai alat peraga.

Memintas tindakan Asinkron

Di sinilah pertama kali kita melihat kemunculan perisian tengah redux-logic yang dimainkan. Kami menggunakan perpustakaan logik redux untuk membuat beberapa 'Logik' yang akan memintas tindakan yang ditentukan.

Dalam sifat Logik kami, kami memberitahu redux-logic tindakan yang kami mahukan untuk memintas. Kami menyatakan bahawa kami mahu redux-logic hanya memberikan data dari tindakan terakhir jenis ini yang dihantar oleh komponen. Dalam contoh kita, tingkah laku deklaratif ini berguna jika orang terus mengklik butang kerana mereka akan mendapat nilai dari tindakan terbaru yang mereka kirimkan, belum tentu janji terakhir untuk kembali!

Seterusnya kami menyatakan bahawa apabila proses asinkron kembali, kami segera menghantar salah satu daripada dua tindakan. Sekiranya janji itu berjaya dikembalikan, kami akan mengembalikan tindakan GET_WEATHER_FOR_CITY_SUCCESSFUL . Inilah yang kita mahukan!

Sebagai alternatif, jika janji yang dikembalikan ditolak maka kami akan menghantar GET_WEATHER_FOR_CITY_FAILURE .

Di sinilah redux-logic benar-benar bersinar . Sudah jelas apa maksud kod Logik, dan apa yang dipancarkan adalah objek sederhana yang senang dibaca dan ditafsirkan! Saya rasa ini sangat senang dibaca, difahami dan disahpepijat.

Di bahagian bawah kami menjelaskan dengan jelas apa yang kami mahu proses asinkron kami lakukan. Kami mahu mengembalikan nilai janji. Perhatikan bagaimana kita menyebarkan muatan yang disertakan dengan tindakan kita ke URL.

Memproses tindakan Asinkron

Anda dapat melihat dari pengurang cuacaDataHandling.js bahawa tindakan yang dihantar dari Logik kami kemudian dianggap sebagai tindakan objek biasa. Pengurang bermutasi keadaan dengan cara yang sama seperti tindakan segerak . Jadi tangkapan skrin di bawah adalah apa yang anda harapkan daripada bekerjasama dengan Redux sebelum ini. Hebat!

Ringkasan

Redux adalah wadah keadaan yang boleh diramal yang popular untuk aplikasi JavaScript. Secara lalai, semua tindakan Redux hanya menyokong tingkah laku segerak, dan anda memerlukan beberapa jenis penyelesaian perisian tengah untuk tingkah laku tidak segerak.

Redux-Logic menyediakan perisian tengah yang jelas dan kuat yang membolehkan anda menggunakan tindakan tidak segerak dalam aplikasi Redux anda. Anda menambahkan alat tengah anda ke Redux Store anda untuk membolehkan aplikasi anda menggunakan Redux-Logic. Anda menggunakan perpustakaan redux-logic untuk membuat Logik yang memintas tindakan tertentu dan menghantar tindakan selanjutnya setelah beberapa pemprosesan tidak segerak (seperti mengambil data dari API) selesai.

Semua tindakan yang terlibat adalah tindakan objek biasa . Saya percaya ini menjadikannya lebih mudah untuk menulis dan lebih mudah difahami berbanding dengan penyelesaian lain. Tambahan pula, redux-logic terasa lebih sesuai dengan organik bahagian-bahagian lain dari seni bina Redux.

Terima kasih kerana membaca, saya mengalu-alukan sebarang komen atau pertanyaan di bawah!