{"id":52760,"date":"2025-01-22T15:03:18","date_gmt":"2025-01-22T08:03:18","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=52760"},"modified":"2025-01-22T15:23:14","modified_gmt":"2025-01-22T08:23:14","slug":"redux-adalah","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/redux-adalah\/","title":{"rendered":"Apa Itu Redux? Pengertian, Manfaat, Istilah dan Cara Install"},"content":{"rendered":"\n

Redux adalah salah satu tools<\/em> populer yang digunakan untuk mengelola state <\/em>atau data dalam aplikasi, terutama di aplikasi berbasis JavaScript seperti React<\/a>.\u00a0Bagi pemula, konsep Redux mungkin terdengar rumit, tapi sebenarnya sangat bermanfaat untuk membuat aplikasi lebih terstruktur dan mudah dikelola.\u00a0<\/p>\n\n\n\n\n\n

Dalam artikel ini, Rumahweb akan membahas tentang apa itu Redux, manfaatnya, dan cara untuk menginstalnya. Yuk, kita pelajari bersama!<\/p>\n\n\n\n

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

Redux pertama kali diperkenalkan pada tahun 2015 oleh Dan Abramov dan Andrew Clark. Tools ini dirancang untuk membantu para developer mengelola data (state<\/em>) dalam aplikasi agar lebih terorganisir.<\/p>\n\n\n\n

Secara sederhana, Redux adalah sebuah state management library<\/em> yang digunakan untuk menyimpan dan mengelola data dalam aplikasi JavaScript<\/em>. Redux bekerja seperti “pusat penyimpanan data” (store<\/em>) dan membuat aplikasi menjadi lebih rapi dan mudah diatur, terutama ketika aplikasi tersebut semakin besar dan kompleks.<\/p>\n\n\n\n

Untuk mempermudah pemahaman anda, kami akan menggunakan analogi berikut. Bayangkan, Redux seperti loker besar di sekolah yang digunakan oleh semua murid. Setiap murid (komponen aplikasi) dapat menyimpan atau mengambil barang (data) dari loker tersebut, tapi mereka harus mengikuti aturan tertentu, seperti memberikan kunci (action<\/em>) kepada penjaga loker (reducer<\/em>). <\/p>\n\n\n\n

Dengan cara ini, semua barang tersimpan di satu tempat (store<\/em>), sehingga lebih mudah diatur dan setiap murid tahu ke mana mereka harus pergi untuk mengambil atau menyimpan sesuatu. Jadi, Redux adalah solusi untuk menjaga alur data dalam aplikasi agar tetap jelas, terorganisir, dan mudah dikelola.<\/p>\n\n\n\n

Manfaat<\/h2>\n\n\n\n

Redux sangat bermanfaat untuk mengelola data (state<\/em>) dalam aplikasi, terutama jika aplikasi memiliki banyak komponen dan data yang saling terkait. <\/p>\n\n\n\n

Dengan Redux, data dapat disimpan di satu tempat (store<\/em>) sehingga lebih terorganisir, mudah diakses, dan diubah tanpa harus saling “menghubungkan” komponen secara langsung. Ini membuat aplikasi lebih mudah di-manage<\/em>, mengurangi bug<\/em>, dan mempermudah developer <\/em>dalam tracking<\/em> perubahan data.<\/p>\n\n\n\n

Istilah-Istilah dalam Redux<\/h2>\n\n\n\n

Berikut adalah beberapa istilah penting dalam Redux yang perlu diketahui, beserta penjelasan sederhananya agar mudah dipahami:<\/p>\n\n\n\n

1. State<\/h3>\n\n\n\n

State<\/em> adalah tempat penyimpanan data di aplikasi. Di Redux, state <\/em>adalah objek yang menyimpan seluruh data yang dibutuhkan oleh aplikasi.\u00a0<\/p>\n\n\n\n

Contohnya, seperti aplikasi toko online, maka state <\/em>bisa berisi informasi seperti daftar produk, keranjang belanja, dan data pengguna yang sedang login<\/em>.<\/p>\n\n\n\n

2. Action<\/h3>\n\n\n\n

Action <\/em>adalah sebuah objek yang memberitahu Redux apa yang ingin dilakukan atau diubah di state<\/em>. Selain itu, Action ini seperti “surat perintah” yang berisi informasi tentang perubahan yang akan terjadi.<\/p>\n\n\n\n

Contohnya, jika pengguna menambahkan produk ke keranjang, maka action <\/em>bisa berupa { type: “ADD_TO_CART”, payload: { productId: 1 } }. Di sini, type adalah jenis aksi, dan payload <\/em>adalah data tambahan yang dibutuhkan.<\/p>\n\n\n\n

3. Reducer<\/h3>\n\n\n\n

Reducer <\/em>adalah fungsi yang bertugas menerima action <\/em>dan state <\/em>sebelumnya, lalu menghasilkan state <\/em>baru. Dalam fungsinya, reducer <\/em>tidak boleh mengubah state <\/em>secara langsung, melainkan menciptakan salinan state <\/em>baru dengan perubahan yang diminta.<\/p>\n\n\n\n

Contohnya, jika ada action “ADD_TO_CART”, reducer <\/em>akan menambahkan produk ke dalam daftar keranjang tanpa mengubah data original secara langsung.<\/p>\n\n\n\n

4. Store<\/h3>\n\n\n\n

Store <\/em>adalah tempat utama atau “pusat” yang menyimpan seluruh state <\/em>aplikasi dan mengelola perubahan state <\/em>berdasarkan action<\/em>.<\/p>\n\n\n\n

Ilustrasinya, store <\/em>seperti gudang utama yang menyimpan semua data aplikasi, dan semua komponen aplikasi bisa mengambil atau memperbarui data dari gudang ini.<\/p>\n\n\n\n

5. Dispatch<\/h3>\n\n\n\n

Dispatch <\/em>adalah cara untuk mengirimkan action <\/em>ke store<\/em> agar Redux tahu apa yang harus dilakukan (misalnya, mengubah state<\/em>).<\/p>\n\n\n\n

Contohnya, ketika pengguna menekan tombol “Tambah ke Keranjang”, aplikasi akan “dispatch” action seperti dispatch({ type: “ADD_TO_CART”, payload: { productId: 1 } })<\/p>\n\n\n\n

6. Selector<\/h3>\n\n\n\n

Selector <\/em>adalah fungsi yang digunakan untuk mengambil data tertentu dari state <\/em>di store<\/em> agar komponen aplikasi bisa menggunakannya.<\/p>\n\n\n\n

Contohnya, jika aplikasi membutuhkan daftar produk dari state<\/em>, selector <\/em>akan mengambil hanya data tersebut tanpa harus mengakses seluruh state<\/em>.<\/p>\n\n\n\n

7. Middleware<\/h3>\n\n\n\n

Middleware <\/em>adalah fungsi tambahan yang berjalan di antara action <\/em>dan reducer<\/em>. Selain itu, Middleware sering digunakan untuk menangani hal-hal seperti logging<\/em>, memanggil API, atau mengelola proses asinkron (seperti fetching <\/em>data dari server).<\/p>\n\n\n\n

Contoh middlewa<\/em>re populer di Redux adalah redux-thunk yang dapat membantu Anda melakukan proses asinkron, seperti mengambil data dari server sebelum mengubah state<\/em>.<\/p>\n\n\n\n

8. Subscribe<\/h3>\n\n\n\n

Subscribe<\/em> adalah cara untuk mendeteksi perubahan state<\/em> di store<\/em>. Ketika state <\/em>berubah, aplikasi dapat “mendengar” perubahan ini dan memperbarui tampilan sesuai data terbaru.<\/p>\n\n\n\n

Cara Install Redux di Localhost<\/h2>\n\n\n\n

Dalam panduan ini, kami akan menginstall redux di localhost <\/em>komputer yang kami gunakan. Sebelum melakukan instalalasi, pastikan Anda telah menginstall Nodejs dan NPM. <\/p>\n\n\n\n

Bagi Anda yang telah menginstall NodeJS dan NPM, Anda bisa melewati step 1 dan 2 pada panduan berikut. Namun, bagi Anda yang belum menginstal NodeJS dan NPM, Anda bisa ikuti panduan berikut:<\/p>\n\n\n\n

    \n
  1. Download package <\/em>Node.Js disini<\/a>.<\/li>\n<\/ol>\n\n\n
    \n
    \"Download<\/a><\/figure>\n<\/div>\n\n\n
      \n
    1. Setelah installer Node.JS terunduh, silahkan run installer <\/em>dan ikuti instruksi instalasi serta setujui perjanjian lisensinya.<\/li>\n<\/ol>\n\n\n
      \n
      \"node.js<\/a><\/figure>\n<\/div>\n\n\n
        \n
      1. Restart laptop terlebih dahulu, sebelum menjalankannya. Jika sudah, Anda dapat memeriksa instalasi yang berhasil dengan membuka command promp<\/em>t\/terminal dan gunakan perintah berikut:

        – node -v<\/strong><\/code> <\/em><\/strong>(untuk pengecekan versi node.js)
        – npm \u2013v<\/code><\/strong> (untuk pengecekan versi npm)<\/li>\n<\/ol>\n\n\n
        \n
        \"cek<\/a><\/figure>\n<\/div>\n\n\n
          \n
        1. Untuk install redux, cukup jalankan perintah berikut ini di dalam command prompt<\/em>\/terminal dengan perintah:<\/li>\n<\/ol>\n\n\n\n
          npm install --save redux<\/code><\/pre>\n\n\n\n
            \n
          1. Kemudian untuk menggunakan Redux dengan aplikasi React, Anda perlu menginstall dependensi <\/em>tambahan dengan menuliskan perintah berikut:\u00a0<\/li>\n<\/ol>\n\n\n\n
            npm install --save react-redux<\/code><\/pre>\n\n\n\n
              \n
            1. Cek pada direktori C: atau tempat pilihan yang Anda gunakan untuk menyimpan instalasi nodejs dan npm. Jika muncul folder node_modules, tandanya Anda sudah berhasil menginstall redux.<\/li>\n<\/ol>\n\n\n
              \n
              \"install<\/a><\/figure>\n<\/div>\n\n\n
              Bagaimana sudah paham bukan tentang apa itu redux, manfaat, istilah dan cara instalasinya? Selamat mencoba!
              <\/p>\n","protected":false},"excerpt":{"rendered":"
              Redux adalah salah satu tools populer yang digunakan untuk mengelola state atau data dalam aplikasi, terutama di aplikasi berbasis JavaScript seperti React.\u00a0Bagi pemula, konsep Redux mungkin terdengar rumit, tapi sebenarnya sangat bermanfaat untuk membuat aplikasi lebih terstruktur dan mudah dikelola.\u00a0 Dalam artikel ini, Rumahweb akan membahas tentang apa itu Redux, manfaatnya, dan cara untuk menginstalnya. […]<\/p>\n","protected":false},"author":355,"featured_media":52787,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[7],"tags":[768,1855,2434],"class_list":{"0":"post-52760","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-programming","8":"tag-nodejs","9":"tag-reactjs","10":"tag-redux"},"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/01\/banner-redux-adalah.png","jetpack_shortlink":"https:\/\/wp.me\/p8n3G7-dIY","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/52760","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/355"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=52760"}],"version-history":[{"count":0,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/52760\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/52787"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=52760"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=52760"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=52760"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}