Apakah Redux: semua yang anda perlu tahu tentang perpustakaan ini

Redux

Sekiranya anda masih tidak tahu apa itu Redux, dalam artikel ini kami akan menumpukan pada menerangkan semua yang anda perlu tahu tentang perpustakaan ini JavaScript, serta kegunaannya, bagaimana ia boleh digunakan, dsb. Dengan cara ini, anda akan mempunyai semua alatan yang diperlukan untuk dapat menyepadukannya ke dalam projek JS anda yang seterusnya.

Mari lihat seperti apa Redux!

Apakah JavaScript?

kod sumber bahasa pengaturcaraan

JavaScript (JS), ialah bahasa pengaturcaraan yang ditafsirkan. Ia dianggap sebagai dialek standard ECMAScript dan dicirikan sebagai berorientasikan objek, berasaskan prototaip, penting, ditaip lemah dan dinamik. Walaupun namanya, ia tidak boleh dikelirukan dengan Java. Penciptaannya adalah berdasarkan pertimbangan komersial, berikutan pemerolehan Sun Microsystems (pencipta Java) oleh Netscape Navigator (pencipta LiveScript) dan pertukaran nama bahasa pengaturcaraan.

Terutamanya digunakan di sisi pelanggan, membentuk sebahagian daripada pelayar web. Ini membolehkan anda menambah baik antara muka pengguna dan membuat halaman web dinamik. Selain itu, JavaScript boleh digunakan pada bahagian pelayan, yang dikenali sebagai JavaScript sisi pelayan atau SSJS. Kebolehgunaannya melangkaui web, mencari penggunaan dalam dokumen PDF dan aplikasi desktop, terutamanya widget, dsb.

Sehingga 2012, semua penyemak imbas moden menyediakan sokongan penuh untuk ECMAScript 5.1, versi JavaScript. Dan, sudah tentu, penyemak imbas web semasa adalah serasi dengan JS secara keseluruhannya, membenarkan kod jenis ini diaktifkan atau dinyahaktifkan apabila diperlukan, sama ada untuk keselamatan, untuk menyahaktifkan beberapa perlindungan terhadap penyalinan teks yang ada pada beberapa tapak web, dsb.

La Sintaks JavaScript menyerupai bahasa seperti C++ dan Java, walaupun ia menggunakan nama dan konvensyen dari Jawa, maka namanya. Tetapi, seperti yang saya nyatakan sebelum ini, adalah penting untuk ambil perhatian bahawa, walaupun nama mereka serupa, Java dan JavaScript mempunyai semantik dan tujuan yang berbeza.

Sebaliknya, kita mesti ingat bahawa JavaScript menggunakan pelaksanaan Model Objek Dokumen (DOM), dan itu JS ialah satu-satunya bahasa pengaturcaraan yang difahami oleh penyemak imbas secara asli. Pada mulanya, ia digunakan dalam halaman web HTML untuk operasi pada klien tanpa akses kepada pelayan. Walau bagaimanapun, hari ini ia digunakan secara meluas untuk menghantar dan menerima maklumat daripada pelayan, selalunya digabungkan dengan teknologi seperti AJAX. JavaScript ditafsirkan dalam ejen pengguna manakala penyata dimuat turun bersama kod HTML.

Aplikasi JS

JavaScript ialah bahasa pengaturcaraan yang digunakan secara meluas dalam pelbagai aplikasi dan konteks, seperti:

  • Pembangunan web: Ia penting dalam pembangunan web. Ia digunakan untuk meningkatkan interaktiviti dan pengalaman pengguna di tapak web dan aplikasi web. Ia digunakan dalam penciptaan bentuk interaktif, kesan visual, pengesahan data masa nyata dan navigasi dinamik, antara lain. Hadir dalam:
    • Bahagian hadapan web: Ia adalah asas pembangunan bahagian hadapan. Rangka kerja dan perpustakaan seperti React, Angular dan Vue.js bergantung pada JavaScript untuk mencipta antara muka pengguna yang interaktif dan dinamik dalam aplikasi web.
    • Bahagian belakang web: Melalui platform seperti Node.js, JavaScript digunakan pada bahagian pelayan untuk membina aplikasi web yang lengkap. Ini membolehkan pembangun menggunakan JavaScript pada kedua-dua bahagian hadapan dan bahagian belakang aplikasi, menjadikannya mudah untuk menyegerakkan data dan membina aplikasi dalam masa nyata.
    • Aplikasi pelayan: Walaupun tidak biasa seperti bahasa sebelah pelayan lain, JavaScript digunakan dalam pembangunan aplikasi pelayan melalui Node.js. Ini amat berguna untuk aplikasi masa nyata dan aplikasi yang mengendalikan sejumlah besar permintaan serentak.
  • Aplikasi mudah alih: Ia digunakan dalam pembangunan aplikasi mudah alih hibrid menggunakan rangka kerja seperti React Native dan Ionic. Rangka kerja ini membolehkan pembangun menulis sekali dan menjalankan aplikasi pada berbilang platform, seperti iOS dan Android.
  • Permainan dalam talian: Ia digunakan dalam pembangunan permainan dalam talian dan permainan pelayar. Perpustakaan seperti Phaser dan Three.js memudahkan untuk mencipta permainan 2D dan 3D interaktif dalam penyemak imbas.
  • Aplikasi desktop: Melalui alatan seperti Electron, adalah mungkin untuk membina aplikasi desktop merentas platform menggunakan teknologi web seperti HTML, CSS dan JavaScript.
  • Sambungan Penyemak Imbas: Untuk menambah fungsi tambahan pada pelayar web, sambungan digunakan. Sambungan ini biasanya ditulis dalam JavaScript.
  • Aplikasi Internet Perkara (IoT): Ia digunakan dalam membangunkan aplikasi dan sistem untuk peranti IoT kerana keupayaannya untuk berkomunikasi dengan perkakasan dan penderia melalui API dan perpustakaan khusus.

Apakah Redux dan bagaimana ia berfungsi?

Redux

Redux ialah perpustakaan JavaScript sumber terbuka yang digunakan untuk mengurus keadaan dalam aplikasi, dan dipengaruhi oleh bahasa berfungsi Elm. Ia sering digabungkan dengan perpustakaan lain seperti React atau Angular untuk membina antara muka pengguna. Ia diilhamkan oleh Dan Abramov dan Andrew Clark, yang diilhamkan oleh perpustakaan Facebook yang dipanggil Flux.

Secara umumnya, Redux ialah perpustakaan kecil dengan a API mudah dan terhad, direka untuk bertindak sebagai bekas yang boleh diramal untuk keadaan aplikasi. Operasinya adalah serupa dengan konsep "mengurangkan" dalam pengaturcaraan berfungsi.

Sejarah Redux bermula sejak 2015, apabila Dan Abramov mula membangunkan versi pertama Redux semasa bersedia untuk memberi ceramah di persidangan React Europe tentang Hot Reload. Semasa proses ini, Abramov melihat persamaan antara corak Fluks dan fungsi pengurang. Pemerhatian ini menyebabkan dia tertanya-tanya sama ada kedai Flux sebenarnya boleh menjadi fungsi pengurang.

Untuk melaksanakan idea ini, Abramov menghubungi Andrew Clark, yang merupakan pengarang pelaksanaan Flux yang dipanggil Flummox. Bersama-sama mereka bekerjasama untuk menghidupkan Redux dan menentukan API yang koheren. Selain itu, mereka melaksanakan keupayaan untuk sambungan menggunakan perisian tengah dan penambah stor, yang menyumbang dengan ketara kepada ekosistem Redux semasa, memperluaskan lagi kemungkinannya.

Hubungan Redux dan React: apa itu React

React ialah perpustakaan JavaScript yang menumpukan pada mencipta antara muka pengguna, walaupun kepelbagaiannya melampaui definisi itu. Alat ini, pada mulanya dibangunkan oleh Facebook, adalah sumber terbuka dan digunakan secara meluas kerana keupayaannya untuk mencipta antara muka pengguna dengan cepat dalam pelbagai aplikasi, termasuk aplikasi web halaman tunggal (SPA) dan aplikasi Android dan iOS.

Tidak seperti rangka kerja lain, seperti Angular, yang menawarkan pendekatan yang lebih kompleks, React adalah menonjol kerana keupayaannya menjana antara muka pengguna dengan cekap. Ini dicapai melalui penggunaan fail .jsx, yang menggabungkan logik dan antara muka pengguna dalam satu fail dan disusun ke dalam unit yang dipanggil komponen.

DOM maya: apakah itu?

Apabila kita mendalami dunia ReactJS, kita mungkin sering mendengar tentang konsep DOM maya. Idea ini berasal daripada tanggapan bijak: daripada mengemas kini keseluruhan DOM sebenar, kami hanya mengubah suai bahagian yang benar-benar memerlukan perubahan. Dalam aplikasi JavaScript lama, kami pernah menerima data dalam format JSON daripada pelayan dan kemudian menjana HTML baharu yang lengkap untuk dipaparkan, menghasilkan penyegaran semula keseluruhan halaman pada setiap pengubahsuaian.

Cara memasang dan mengkonfigurasi Redux dalam projek anda

Sekiranya anda ingin tahu bagaimana untuk memasang ReduxSebenarnya ia tidak rumit sama sekali. Untuk melakukan ini, anda mesti pergi ke terminal dan dari sana anda mesti melaksanakan arahan berikut:

npm i -S redux

Kini anda mempunyai versi stabil Redux yang dipasang pada sistem anda. Sudah tentu, anda mungkin perlu menyelesaikan beberapa kebergantungan, seperti memasang npm, pengurus pakej Node.js. Setelah ini selesai, kami kini akan memasang React, yang juga anda perlukan untuk memanfaatkan Redux, serta alat pembangunan untuk mula mencipta projek anda.

Untuk memasang pakej lain ini, arahan yang anda mesti laksanakan ialah:

npm i -S react-redux npm i -D redux-devtools

Sekarang anda akan mempunyai segala-galanya untuk bermula. Jika anda pergi ke folder atau direktori utama di mana Redux telah dipasang, anda akan melihat bahawa terdapat beberapa subdirektori atau subfolder, seperti STORE, REDUCERS, ACTIONS, TYPES. Anda mesti tahu apa setiap satu:

  • TINDAKAN: Ini ialah objek yang mesti mempunyai dua sifat, satu yang menerangkan jenis (TYPE) tindakan dan satu lagi yang menerangkan perkara yang perlu diubah dalam keadaan apl.
  • PENGURANG- Reducer ialah fungsi yang melaksanakan tingkah laku tindakan. Mereka menukar keadaan apl, bergantung pada perihalan tindakan dan perihalan perubahan keadaan.
  • MENYIMPAN: ialah tempat di mana tindakan dan pengurang bertemu, mengekalkan dan mengubah keadaan apl. Hanya ada satu.
  • JENIS: seperti yang saya katakan sebelum ini, ia adalah jenis tindakan.

Contoh praktikal: Mencipta aplikasi dengan Redux

Un contoh menggunakan Redux Ia mungkin seperti berikut, di mana aplikasi perakaunan mudah dibuat menggunakan Redux. Tetapi untuk melakukan ini, anda mesti mengkonfigurasi Redux terlebih dahulu dan menentukan tindakan dan pengurang anda:

NOTA: jika anda tidak tahu bahasa pengaturcaraan JS, dan anda tidak tahu cara bekerja dengan React, anda harus mempelajarinya sebelum memulakan dengan Redux, untuk lebih memahami cara melakukannya.
// Import perpustakaan Redux import { createStore } daripada 'redux'; // Define the actions const incrementAction = { type: 'INCREMENT' }; const decrementAction = { type: 'DECREMENT' }; // Define the reducer const counterReducer = (state = 0, action) => { suis (action.type) { case 'INCREMENT': return state + 1; kes 'DECREMENT': keadaan kembali - 1; lalai: keadaan kembali; } }; // Cipta kedai const kedai Redux = createStore(counterReducer); // Langgan perubahan dalam kedai store.subscribe(() => { console.log('Current counter state:', store.getState()); }); // Tindakan penghantaran untuk mengubah suai state store.dispatch(incrementAction); store.dispatch(incrementAction); store.dispatch(decrementAction);

Ini adalah contoh yang sangat mudah tentang cara menggunakan Redux. Dalam apl yang lebih besar, anda akan menentukan tindakan dan pengurang yang lebih kompleks serta menyambungkan komponen React untuk mengakses dan mengemas kini keadaan kedai. Tetapi sekurang-kurangnya ini memberi anda gambaran tentang cara ia berfungsi...


Menjadi yang pertama untuk komen

Tinggalkan komen anda

Alamat email anda tidak akan disiarkan. Ruangan yang diperlukan ditanda dengan *

*

*

  1. Bertanggungjawab atas data: Miguel Ángel Gatón
  2. Tujuan data: Mengendalikan SPAM, pengurusan komen.
  3. Perundangan: Persetujuan anda
  4. Komunikasi data: Data tidak akan disampaikan kepada pihak ketiga kecuali dengan kewajiban hukum.
  5. Penyimpanan data: Pangkalan data yang dihoskan oleh Occentus Networks (EU)
  6. Hak: Pada bila-bila masa anda boleh menghadkan, memulihkan dan menghapus maklumat anda.