Cara Membuat ERD Untuk Aplikasi Web Rental Mobil

 

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