Dalam membuat aplikasi tentu kita berharap aplikasi itu bisa beraktifitas dengan mengolah data, mengirimkan data, memunculkan notifikasi, memberikan pesan error ketika kita tidak mengakses suatu halaman, atau aktifitas dimana kita beraktifitas satu halaman satu dengan halaman lain
Semua itu kita membutuhkan state di dalamnya. Dengan state kita bisa memberi nilai awal dan nilai tertentu yang ingin kita berikan dan berubah ubah
Untuk beberapa pergerakan dan perubahan kita bisa menggunakan useState. Namun jika aplikasi itu sudah sangat besar dan memiliki fitur yang banyak. Maka kita harus menggunakan Redux
Apa Itu Redux?
"A Predictable State Container for JS Apps"
wadah state yang bisa diprediksi. Artinya kita menentukan setiap pegerakan state ini. Mulai dari nilai awalnya hingga nilai akhirnya. Kita bisa menentukan itu semua dengan segala urutan logika
Kali ini saya akan menjelaskan bagaimana cara menerapkan Redux ini pada project React Native
Kenapa React Native? Karena saat ini sedang mendalami teknologi ini dan semoga kalian juga sedang belajar React Native ini
Langkah Langkah
Pertama. Install semua package dibawah
npm install react-redux@7.2.2 redux@4.0.5 redux-thunk@2.3.0
kenapa saya menambahkan versinya? Karena ini merupakan versi yang work di aplikasi saya
Kedua. Kalian buat file store.js di folder redux (ingat kita membuat aplikasi dengan prinsip atomic design yang bisa kalian pelajari disini)
Case kali ini kita akan akan membuat global reducer. Dimana ia akan berfungsi untuk menanagi segala state secara global. Contohnya untuk menangani error, loading data, dan lain sebagainya
Ketiga. Buat folder reducer yang berisi file global.js dengan isi seperti berikut
Pastikan kalian sudah membuat file index dimana. Seluruh reducer didalam folder ini bisa digunakan di luar folder/file
Keempat kita coba state ini. Saya akan mencoba nya untuk menampilkan animasi loading pada aplikasi android
Caranya dengan menambahkan beberapa baris kode pada file index.js di folder Address
Tambahkan kode berikut
const dispatch = useDispatch();
lalu saya akan menamabhkan kode ini
dispatch({type:"SET_LOADING", value:false})
di response api, baik ketika error ataupun success
Sehingga tampilan kode akan berikut
JANGAN LUPA UNTUK MENGIMPORT FILE YANG DIGUNAKAN