Redux merupakan salah satu pilihan state manajemen dari banyaknya state manajemen yang dapat digunakan pada aplikasi react. redux merupakan sebuah library yang stand alone dan tidak bergantung pada react jadi redux dapat digunakan tidak hanya pada react js melainkan dapat digunakan pada banyak framework javascript seperti Angular, Vue, Ember, and vanilla JS.
*Basic redux
Sebelum memulai menggunakan redux ada beberapa istilah dasar yang perlu dipahami yaitu store, action dan reducer
Store adalah tempat kita dapat menyimpan semua state(data) pada aplikasi kita.
Action adalah sebuah fungsi yang berisi data object yang nantinya akan dikirimkan ke reducer, lalu reducer memproses fungsi action tersebut dan mengubah state pada redux store.
Reducer berisi state dan fungsi untuk mengelolah value state berdasarkan fungsi action yang dikirimkan dari aplikasi.
Persiapan Project
Aplikasi yang akan kita buat menggunakan react dan redux adalah aplikasi Todo list sederhana, dimana kita dapat menambahkan list todo, menghapus todo dan mengubah status complete todo tersebut.
Clone Project Dari Github
Agar tidak lama dalam proses setup tampilanya kita perlu clone project yang telah disiapkan.
git clone https://github.com/rahulsya/todo-redux.gitlalu ubah branch ke starter dengan menjalankan
git checkout starterDan jalankan npm install lalu npm run start
Instalasi react redux dan konfigurasi redux
library yang dibutuhkan adalah redux dan react redux. redux sendiri adalah core libray-nya dan react-redux berisi function untuk mengakses state dari redux store, menjalankan action dan melakukan update data state pada aplikasi react serta menggunakan fungsi hooks yang telah disediakan oleh react-redux .
npm install redux react-reduxSelanjutnya Membuat folder didalam folder /src bernama /redux lalu didalam folder tersebut buat file bernama store.js
fungsi createStore() digunakan untuk menyimpan semua state dari aplikasi, didalam fungsi tersebut nantinya akan ditambahkan file reducer yang akan kita buat selanjutnya.
- Membuat reducer
Didalam folder /redux buat folder bernama /Todo lalu buat file bernama reducer.js .
pada reducer akan diisi oleh state bernama todos=[] , lalu ada sebuah fungsi bernama todoReducer() yang menerima parameter state dan action serta mengembalikan data state. fungsi todoReducer() digunakan untuk memanipulasi state berdasarkan action yang dikirim dari aplikasi react.
Setelah membuat file reducer kembali lagi ke file store.js , lalu kita dapat mendaftarkan reducer yang dibuat didalam fungsi createStore() .
- Menambahkan Komponen </Provider>
Provider adalah sebuah component dari react-redux yang mana kita dapat mengakses state di redux store dari berbagai komponent turunan-nya.
komponent <Provider store={store}> ini menerima sebuah props bernama store yang perlu kita isi oleh file store yang telah kita buat sebelumnya
Kita letakan komponen Provider pada file /index.js yang berada pada root folder aplikasi react kita. Agar dapat kita dapat mengakses state redux store dari komponen mana saja.
Mengakses state dari redux store dengan Hooks
untuk mengakses data state dari store yang telah dibuat, kita dapat menggunakan fungsi hooks dari library react-redux yang benama useSelector(), useSelector sendiri menerima satu fungsi yang bisa disebut dengan selector function. Selector ini mengambil state dari redux store dan kita dapat dijadikan sebagai sebuah argumen, membaca isi data state dan dapat mengembalikan hasilnya.
Menampilkan state data Todo Pada React
Buka file App.js pada didalam folder ./src lalu gunakan fungsi hook useSelector
Selanjutnya Kirimkan state Items sebagai props pada komponent TodoItems, lalu tampilkan state items didalam komponent TodoItems Buka file TodoItems.js pada folder /Components
Berikut hasil menampilkan state dari redux store ke tampilan aplikasi react
Membuat Fungsi Action Todo
Fungsi Action yang akan dibuat pada aplikasi todoApp ini adalah
- AddTodo(todo)
Fungsi AddTodo berisi fungsi yang mengembalikan data object yang disi dengan data type dan data todo, untuk Type disi dengan ‘ADD_TODO’ dan data: berdasarkan parameter todo yang dikirm dari aplikasi
- DeleteTodo(id)
Fungsi DeleteTodo berisi fungsi yang mengembalikan data object yang disi dengan data type dan id todo, untuk Type disi dengan ‘DELETE_TODO’ dan id: berdasarkan parameter id yang dikirm dari aplikasi
- CompleteTodo(id)
Fungsi CompleteTodo berisi fungsi yang mengembalikan data object yang disi dengan data type dan id todo, untuk Type disi dengan ‘COMPLETE_TODO’ dan id: berdasarkan parameter id yang dikirm dari aplikasi
Buat File Action.js pada folder /Redux/Todo Lalu buat fungsi action .
Melengkapi File Reducer
Selajutnya kita lengkapi file reducer.js dengan menambahkan beberapa pilihan kondisi untuk merespon fungsi action yang telah dibuat sebelumnya yang dikirim dari aplikasi dan untuk mengubah data state di store.
kondisi yang dibuat yaitu berdasarkan dari data Type dari fungsi action yang dibuat, typenya yaitu ADD_TODO, DELETE_TODO dan COMPLETE_TODO.
Untuk dapat mengubah data state pada store kita harus melalui fungsi todoReducer() didalam fungsi ini kita dapat mengubah data state berdasarkan type action yang dikirim dari aplikasi melalui fungsi action.
Memanggil fungsi Action Dengan UseDispatch()
redux yang telah kita setup sebelumnya sudah dapat berjalan dan juga dapat melakukan pengubahan data state pada redux store.
selanjutnya kita hanya perlu memanggil fungsi action agar fungsi reducer dapat merespon apa yang harus dilakukan dengan action yang telah kita panggil.
Untuk memanggil action kita dapat menggunakan fungsi hook dari react-redux bernama useDispatch(), lalu didalam fungsi useDispatch disi dengan fungsi action yang akan dipanggil.
Memanggil action addTodo()
Fungsi action ini digunakan untuk menambahkan data todo baru. Buka file TodoInput.js yang berada pada folder ./components lalu tambahkan script berikut.
Memanggil Action DeleteTodo() dan CompleteTodo()
Selajutnya buka file TodoItem.js yang berada pada folder ./components lalu import fungsi action deletetodo dan completetodo dan import juga hooks useDispatch dari react-redux.
Berikut adalah hasil tampilan aplikasi todo yang kita buat dengan redux
Redux DevTools
Aplikasi Todo yang kita buat dengan menggunakan redux telah berjalan dengan baik, namun kita tidak dapat memonitor apa saja perubahan state yang dilakukan oleh redux ketika membuat aplikasi.
Kita dapat memonitor apa saja aktivitas yang kita lakukan dengan redux mulai dari melihat action yang kita panggil, serta perubahan state dari redux store kita dengaan menggunakan ekstensi dari google bernama redux Devtols.
Konfigurasi react dengan Redux Devtools
Untuk Menyambungkan aplikasi kita dengan redux hanya perlu menambahkan script pada file store.js
Selanjutnya kita restart aplikasi react dan akan nampak indikator icon redux devtools hidup lalu kita coba operasikan aplikasi todo, lalu akan nampak apa saja yang telah kita lakukan terhadap reduxnya.
Dari gambar diatas kita dapat melihat tipe action yang kita panggil dan data state yang berubah dari tiap action yang kita panggil.
Penutup
Itulah contoh sederhana penggunaan redux pada aplikasi react, semoga tulisan ini memberikan manfaat kepada para pembacanya.
saya harap teman — teman yang kebetulan mampir bisa memberikan feedback / kritik terkait tulisan yang saya buat ini.
Dan saya ingin tau komentar teman-teman bagi yang mengikuti tutorial blog ini, apakah tulisan(blog) ini dapat dengan mudah untuk ikuti dan dipahami ?
Repository Project