{"id":13624,"date":"2023-04-11T02:42:00","date_gmt":"2023-04-10T19:42:00","guid":{"rendered":"https:\/\/www.jetorbit.com\/blog\/?p=13624"},"modified":"2023-04-11T10:14:33","modified_gmt":"2023-04-11T03:14:33","slug":"apa-itu-redux","status":"publish","type":"post","link":"https:\/\/www.jetorbit.com\/blog\/apa-itu-redux\/","title":{"rendered":"Apa Itu Redux, Kelebihan, dan Cara Install Redux"},"content":{"rendered":"\n

Pasti ada yang masih asing sekali dengan istilah Redux. Iya, kan? Apalagi jika kalian bukan anak IT. Baiklah, tanpa mengulur waktu agar menjadi tak asing, langsung simak sampai kelar yuk Apa Itu Redux, Kelebihan, dan Cara Install Redux<\/strong><\/p>\n\n\n\n

Apa Itu Redux?<\/strong><\/h2>\n\n\n\n

Redux pertama kali diperkenalkan oleh Dan Abramov dan Andrew Clark pada tahun 2015. Redux adalah sebuah aplikasi state management<\/em>. Jadi, Redux itu bekerja dengan cara membuat sebuah store <\/em>yang berisi seluruh state <\/em>pada aplikasi web.<\/p>\n\n\n\n

Ketika terjadi perubahan pada state<\/em>, Redux akan membuat sebuah action <\/em>yang akan diolah oleh reducers <\/em>sehingga store <\/em>akan berubah sesuai dengan perubahan state<\/em>. Maka dari itu, seluruh komponen pada aplikasi web akan menggunakan state <\/em>yang sama dan dapat dengan mudah diakses.<\/p>\n\n\n\n

FYI, Redux sering digunakan bersamaan dengan library reactjs yang saat ini sangat populer digunakan sebagai library javascript. Tenang, Redux bisa digunakan untuk framework <\/em>JavaScript yang lain.<\/p>\n\n\n\n

Apa Itu State?<\/strong><\/h2>\n\n\n\n

State <\/em>adalah data private <\/em>sebuah component<\/em>. Data ini hanya tersedia untuk component <\/em>tersebut ya dan tak bisa diakses dari component <\/em>lain. Kalian dapat menggunakan state <\/em>jika ingin mengolah data yang bersifat internal di dalam component <\/em>itu sendiri.<\/p>\n\n\n\n

Kalian akan menyimpan state <\/em>di setiap komponen tanpa state management library<\/em>. Namun hal ini akan menghadirkan tantangan jika aplikasi yang dibangun semakin kompleks.<\/p>\n\n\n\n

Kalian akan kesulitan untuk mengatur state <\/em>di komponennya, belum lagi jika ada komunikasi data antarkomponen.<\/p>\n\n\n\n

Kelebihan Redux<\/strong><\/h2>\n\n\n\n

Redux memiliki banyak kelebihan selain state management <\/em>yang lebih baik, yakni: <\/p>\n\n\n\n

Redux membuat state dapat diprediksi<\/strong><\/h3>\n\n\n\n

Sebuah state <\/em>umumnya dapat diprediksi di library Redux karena reducer <\/em>selalu mengembalikan output <\/em>yang sama ketika state <\/em>atau action <\/em>yang sama diteruskan ke reducer<\/em>.<\/p>\n\n\n\n

Pada Redux, setiap status tidak dapat diubah, ya. Hal tersebut menguntungkan developers <\/em>karena dapat melakukan aktivitas yang cepat dengan memanfaatkan infinite redo and undo<\/em>.<\/p>\n\n\n\n

Oia, memungkinkan juga untuk mengimplementasikan time travel <\/em>yang mana kemampuan ini digunakan untuk bergerak back and forth <\/em>antara previous state <\/em>dan melihat hasilnya secara real time<\/em>.<\/p>\n\n\n\n

Redux bersifat maintainable atau dapat dipelihara<\/strong><\/h3>\n\n\n\n

Kalian tahu kah bahwa Redux tergolong sebagai platform <\/em>yang ketat dalam mengatur kode? Namun, aturan kode yang ketat ini justru memudahkan developer <\/em>yang sudah memiliki pengetahuan mendalam untuk memahami struktur aplikasi Redux. Akibatnya, Redux sangat bermanfaat untuk aplikasi besar yang sering membutuhkan pembaruan. <\/p>\n\n\n\n

Debugging yang mudah menggunakan Redux<\/strong><\/h3>\n\n\n\n

Redux juga memudahkan untuk debug aplikasi, loh. Redux yang selalu mencatat action <\/em>dan state <\/em>akan memudahkan developer <\/em>memahami kesalahan coding<\/em>, jaringan, dan bentuk bug <\/em>lain yang mungkin muncul selama proses produksi.<\/p>\n\n\n\n

Selain pencatatan action <\/em>dan state<\/em>, Redux juga memiliki DevTools yang memungkinkan melakukan time travel action<\/em>, mempertahankan tindakan saat memuat ulang halaman, dan sebagainya. <\/p>\n\n\n\n

Performa yang baik<\/strong><\/h3>\n\n\n\n

Redux tepat digunakan untuk melakukan pelacakan component\u2019s state<\/em>. Redux berisi beberapa peningkatan kinerja yang diimplementasikan di dalamnya, termasuk pembuatan ulang komponen.<\/p>\n\n\n\n

Kemudahan saat melakukan pengujian<\/strong><\/h3>\n\n\n\n

Sebagai reducer functions<\/em> yang digunakan untuk mengubah fungsi murni, redux menghasilkan output <\/em>yang sama untuk input <\/em>yang sama. Oleh karena itu, menguji fungsi murni menjadi tugas yang mudah dan sederhana.<\/p>\n\n\n\n

State yang persistent<\/strong><\/h3>\n\n\n\n

Redux memungkinkan untuk mempertahankan beberapa state <\/em>aplikasi ke penyimpanan lokal dan memulihkannya setelah melakukan refresh<\/em>. Tentunya ini bagus sebab memudahkan serta membuat pekerjaan lebih efisien.<\/p>\n\n\n\n

Memungkinkan untuk Rendering Sisi Server<\/strong><\/h3>\n\n\n\n

Saat sebuah state <\/em>berubah di Redux maka akan dihasilkan state <\/em>baru yang seringkali termasuk shallow copy<\/em>. Akibatnya, re-rendering<\/em> lebih kecil kemungkinannya.<\/p>\n\n\n\n

Tak usah khawatir sebab dengan Redux, bisa menangani re-rendering <\/em>aplikasi dengan mengirimkan application state <\/em>ke server bersama dengan responsnya terhadap server requests<\/em>. Komponen yang dibutuhkan lalu di render dalam HTML dan dikirim ke klien.<\/p>\n\n\n\n

Kekurangan Redux<\/strong><\/h2>\n\n\n\n

Selanjutnya terkait kekurangan dari redux adalah:<\/p>\n\n\n\n

Tanpa Enkapsulasi<\/strong><\/h3>\n\n\n\n

Library Redux tidak mengizinkan enkapsulasi data ya sehingga tidak ada cara untuk mencegah terjadinya masalah keamanan saat aplikasi berkembang dengan pesat.<\/p>\n\n\n\n

Jika aplikasi menjadi lebih kompleks maka risiko kelemahan keamanan juga meningkat, loh. Sebab dengan tidak adanya enkapsulasi data, komponen manapun dapat membacanya.<\/p>\n\n\n\n

Batasan Desain<\/strong><\/h3>\n\n\n\n

Redux sering dikritik karena tidak fleksibel dan relatif kaku. Makanya Redux hanya digunakan untuk mengelola aplikasi sederhana.<\/p>\n\n\n\n

Penggunaan Memori yang Berlebihan<\/strong><\/h3>\n\n\n\n

Setiap state <\/em>di Redux tidak dapat diubah. Oleh karena itu, reducer <\/em>harus melakukan return new form<\/em> setiap kali dipanggil untuk mengubah existing condition<\/em>. Pada jangka panjang, metode ini dapat meningkatkan penggunaan memori yang dihasilkan dari kompilasi. <\/p>\n\n\n\n

Peningkatan Kompleksitas<\/strong><\/h3>\n\n\n\n

Redux memiliki learning curve<\/em> yang lebih tinggi dalam hal layering <\/em>karena manipulation logic actions<\/em> atau reducers<\/em>. <\/p>\n\n\n\n

Memakan Waktu<\/strong><\/h3>\n\n\n\n

Redux dapat memakan waktu implementasi untuk local state management, <\/em>baik minor maupun medium-level karena butuh lebih banyak input kode boilerplate <\/em>untuk memulainya.<\/p>\n\n\n\n

Cara Install Redux <\/strong><\/h2>\n\n\n\n

Nah, sebelum melakukan instalasi Redux, harus menginstall Nodejs dan NPM dulu, ya. Jika sudah memilikinya, silakan ikuti langkah-langkah menginstall Nodejs dan NPM berikut ini: <\/p>\n\n\n\n

Mengakses Web Node.js<\/strong><\/h3>\n\n\n\n

Buka URL https:\/\/nodejs.org\/<\/a> dan install package filenya.<\/p>\n\n\n

\n
\"apa<\/a><\/figure><\/div>\n\n\n

Melakukan Instalasi Node.js<\/strong><\/h3>\n\n\n\n

Setelah selesai mengakses web Node.js, silakan download <\/em>installer Node.js. Tunggu proses pengunduhan lalu run installer dan ikuti instruksi instalasi serta setujui perjanjian lisensinya. Selanjutnya, silakan buka hasil unduhan installer Node.js dan lakukan instalasi Node.js<\/p>\n\n\n

\n
\"apa<\/a><\/figure><\/div>\n\n\n

Melakukan Instalasi Redux<\/strong><\/h3>\n\n\n\n

Sebelum melakukan instalasi redux, restart <\/em>dulu ya perangkat kalian untuk menjalankannya. Setelah itu, kalian dapat memeriksa instalasi yang berhasil dengan membuka command prompt dan ketik node -v.<\/p>\n\n\n\n

Perintah ini akan menunjukkan versi Node terbaru di sistem kalian. Sedangkan untuk memeriksa apakah npm berhasil diinstal, silakan ketik npm \u2013v yang memunculkan versi npm terbaru di perangkat kalian.<\/p>\n\n\n

\n
\"redux<\/a><\/figure><\/div>\n\n\n

Sudah selesai mengunduh dan menginstall Nodejs dan NPM? Untuk melakukan instalasi Redux, cukup jalankan perintah berikut ini di dalam command prompt atau terminal.<\/p>\n\n\n\n

npm install –save redux<\/p>\n\n\n\n

Lalu untuk menggunakan Redux dengan aplikasi React, perlu menginstall dependensi tambahan dengan menuliskan perintah berikut pada command prompt: <\/p>\n\n\n\n

npm install –save react-redux<\/p>\n\n\n\n

Cek pada direktori C: atau tempat pilihan yang digunakan untuk menyimpan instalasi nodejs dan npm kalian. Jika muncul folder node_modules maka tandanya sudah berhasil menginstall Redux, ya.<\/p>\n\n\n\n

Silakan buka folder tersebut untuk melihat apakah dependensi react-redux juga sudah berhasil kalian install.<\/p>\n\n\n\n

Simpulan <\/strong><\/h2>\n\n\n\n

Sudah kalian pahami ya bahwa Redux adalah salah satu library <\/em>yang berfungsi untuk melakukan perubahan state <\/em>yang dibutuhkan pada fungsional aplikasi.<\/p>\n\n\n\n

Jadi bagaimana? Kalian sudah paham kan apa itu Redux dan cara menginstallnya? <\/p>\n\n\n\n

Selamat mencoba dan tunggu info-info menarik lainnya dari kami, ya \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"

Pasti ada yang masih asing sekali dengan istilah Redux. Iya, kan? Apalagi jika kalian bukan anak IT. Baiklah, tanpa mengulur waktu agar menjadi tak asing, langsung simak sampai kelar yuk Apa Itu Redux, Kelebihan, dan Cara Install Redux Apa Itu Redux? Redux pertama kali diperkenalkan oleh Dan Abramov dan Andrew Clark pada tahun 2015. Redux … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":13644,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"generate_page_header":"","footnotes":""},"categories":[25],"tags":[4579,4581,4585,283,7,4584,4583,4580,4582],"class_list":["post-13624","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-info","tag-apa-itu-redux","tag-apa-itu-state","tag-cara-install-redux","tag-domain-murah","tag-hosting-murah","tag-kekurangan-redux","tag-kelebihan-redux","tag-redux-adalah","tag-state-adalah","infinite-scroll-item","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-33"],"_links":{"self":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/13624","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/comments?post=13624"}],"version-history":[{"count":2,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/13624\/revisions"}],"predecessor-version":[{"id":13661,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/13624\/revisions\/13661"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media\/13644"}],"wp:attachment":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media?parent=13624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/categories?post=13624"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/tags?post=13624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}