Memahami Redux: Menyelam Lebih Dalam ke dalam Kerja Dalamannya

Apakah Redux?

Redux ialah bekas keadaan yang boleh diramal untuk apl JavaScript. Ia membantu anda mengurus keadaan aplikasi anda dengan cara yang konsisten merentas persekitaran yang berbeza, sama ada ia dijalankan pada klien, pelayan atau malah dalam persekitaran asli. Redux adalah berdasarkan idea bahawa keseluruhan keadaan aplikasi anda harus diurus dalam satu sumber kebenaran: kedai.

Konsep Utama Redux

Untuk memahami cara Redux berfungsi, mari kita pecahkan konsep terasnya:

1. Kedai: Kedai ialah repositori pusat untuk keadaan aplikasi. Ia memegang keseluruhan pepohon keadaan permohonan anda. Hanya terdapat satu kedai dalam aplikasi Redux.

2. Tindakan: Tindakan ialah objek JavaScript biasa yang mewakili niat untuk menukar keadaan. Mereka mesti mempunyai sifat jenis yang menunjukkan jenis tindakan yang dilakukan. Secara pilihan, ia juga boleh mengandungi data tambahan, dikenali sebagai muatan, yang memberikan lebih banyak maklumat tentang tindakan itu.

3. Reducers: Reducer ialah fungsi tulen yang mengambil keadaan semasa dan tindakan sebagai hujah dan mengembalikan keadaan baharu. Mereka menentukan cara keadaan aplikasi berubah sebagai tindak balas kepada tindakan. Memandangkan pengurang adalah fungsi tulen, ia tidak mengubah keadaan sedia ada sebaliknya mengembalikan objek keadaan baharu.

4. Penghantaran: Fungsi penghantaran digunakan untuk menghantar tindakan ke kedai. Apabila tindakan dihantar, kedai menjalankan pengurang untuk mengira keadaan baharu berdasarkan keadaan semasa dan tindakan.

5. Pemilih: Pemilih ialah fungsi yang mengekstrak dan mengembalikan bahagian keadaan tertentu daripada kedai. Ia membantu merangkum logik untuk mengakses keadaan, menjadikan kod anda lebih modular dan lebih mudah untuk diuji.

Cara Redux Berfungsi: Aliran Langkah demi Langkah

Untuk melihat cara Redux berfungsi, mari kita lihat aliran biasa tentang cara keadaan berubah dalam aplikasi berkuasa Redux.

1. Menghantar Tindakan: Apabila sesuatu berlaku dalam apl (cth., pengguna mengklik butang), tindakan dihantar. Tindakan ini ialah objek biasa yang menerangkan perkara yang berlaku, biasanya mengandungi jenis dan beberapa muatan.
   

   const incrementAction = {
     type: 'INCREMENT',
     payload: 1
   };
   
   store.dispatch(incrementAction);
   

   Salin selepas log masuk

2. Penurun Memproses Tindakan: Kedai menghantar tindakan yang dihantar dan keadaan semasa kepada pengurang. Pengurang kemudian menentukan cara keadaan harus dikemas kini berdasarkan jenis tindakan.
   

   function counterReducer(state = { count: 0 }, action) {
     switch (action.type) {
       case 'INCREMENT':
         return { count: state.count + action.payload };
       default:
         return state;
     }
   }
   

   Salin selepas log masuk

3. Stor Mengemas kini Keadaan: Pengurang mengembalikan objek keadaan baharu, yang menggantikan keadaan lama dalam stor. Kedai kemudian memberitahu semua komponen yang dilanggan tentang perubahan keadaan.

4. Pemarahan Semula Komponen: Mana-mana komponen yang melanggan kemas kini keadaan akan dipaparkan semula untuk menggambarkan keadaan baharu.
   

   function mapStateToProps(state) {
     return {
       count: state.count
     };
   }
   

   Salin selepas log masuk

Middleware dalam Redux

Perisian tengah dalam Redux membolehkan anda memanjangkan Redux dengan fungsi tersuai. Middleware boleh memintas tindakan sebelum ia mencapai pengurang dan boleh melaksanakan tugas seperti pengelogan, pelaporan ralat atau membuat permintaan tak segerak.

Salah satu perisian tengah yang paling popular ialah redux-thunk, yang membolehkan anda menulis pencipta tindakan yang mengembalikan fungsi dan bukannya tindakan. Ini amat berguna untuk mengendalikan operasi tak segerak dalam Redux.

const incrementAsync = () => (dispatch) => {
  setTimeout(() => {
    dispatch({ type: 'INCREMENT', payload: 1 });
  }, 1000);
};

store.dispatch(incrementAsync());

Mengapa Menggunakan Redux?

• Kebolehramalan: Redux memastikan keadaan boleh diramal dengan mengikut peraturan yang ketat, menjadikan penyahpepijatan dan ujian lebih mudah.
• Negeri Berpusat: Mempunyai satu sumber kebenaran memudahkan untuk mengurus keadaan dan menaakul tentang gelagat apl.
• DevTools: Redux DevTools menawarkan keupayaan penyahpepijatan yang berkuasa, membolehkan anda memeriksa setiap perubahan keadaan, tindakan dan banyak lagi.
• Ekosistem: Redux mempunyai ekosistem alatan, perisian tengah dan perpustakaan yang luas yang boleh membantu anda memperluaskan keupayaannya.

Redux ialah alat yang berkuasa untuk mengurus keadaan dalam aplikasi JavaScript. Dengan memahami konsep terasnya—stor, tindakan, pengurang, penghantaran dan pemilih—anda boleh memanfaatkan potensi penuh Redux untuk membina aplikasi berskala dan boleh diselenggara. Walaupun Redux hadir dengan lengkung pembelajarannya sendiri, menguasainya akan memberi anda kawalan yang lebih besar ke atas pengurusan keadaan apl anda.

Atas ialah kandungan terperinci Memahami Redux: Menyelam Lebih Dalam ke dalam Kerja Dalamannya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!