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

 

Postingan kali ini akan membahas bagaimana cara mengolah pengiriman data dari form React Native menggunakan state

Hooks yang akan kita gunakan kali ini adalah useState. Pastikan kalian sudah mengimportnya dari library 'react'

Langkah Langkah

Definisikan useState menggunakan const dengan kode dibawah ini

Coba saya jelaskan apa sih maksud email dan setEmail diatas

email (sebenarnya bisa menggunakan nama apapun) adalah sebuah value yang nilainya bisa berubah ubah atau mendefinisikan state yang ingin kita gunakan

setEmail, adalah fungsi yang memungkinkan kita mengubah value dari email ini

Untuk kasus yang lebih luas lagi, kita bisa menamakan email dan setEmail dengan konteks kasus kita. Seperti data dan setData, payment dan setPayment.

Lalu berikan props pada component

 

Props yang diberikan adalah value dan onChangeText. 

value akan berisi state

onChangeText adalah props yang berisi fungsi yang akan mengubah, mengolah value yang berisi state. Semisal kita mengetikan "abcdefgh..." maka state itu akan berubah menjadi "abcdefgh..."

Tambahkan ...props agar props apapun  yang kita tambahkan bisa terpakai

...props berguna agar segala props yang kita tuliskan bisa digunakan pada component lain. Jadi kita ga perlu capek capek menuliskannya sebagai obejct parameter. Namun cukup dengan kode dibawah saja

Buat tombol sign in yang akan menjalankan fungsi onSubmit

onSubmit disini kita belum meng-authentication nya dengan API, namun kita akan membuktikan apakah state ini berhasil mengirimkan nilai/data

Lalu pasang function diatas didalam sebuah props yang bernama onPress sehingga sewaktu waktu ketika kita mengklik tombol SignIn function diatas akan berjalan

 

Nyalakan React Native Debugger

 

Tekan CTRL + M di emulator android dan pilih Debug maka React Native Debugger akan berjalan lalu lihat log dengan cara klik kanan, Inspect, dan pilih Console

Lalu coba klik tombol Sign In dan lihat apakah state kita berhasil mengirimkan data

 

Kesimpulan

 Dari sini kita memahami dasar dasar menggunakan hooks useState untuk mengirimkan data. Ketika aplikai menjadi rumit kita tentu membutuhkan tool

 

Apakah kalian pernah mendapatkan pesan error yang menujukan pesan berikut?

error: Error: Unable to resolve module

Lalu beberapa kesalahan kesalahan lain dalam penulisan kode bermunculan dibawahnya

Yang lebih membingungkan lagi kalian sebenarnya sudah memperbaiki kode tersebut dan yakin bahwa semuanya sudah benar. Namun komputer kita secara serta merta menganggap bahwa segala perubahan tidak dikenali

Penyebab

Hal ini bisa disebabkan karena cache pada penyimpanan sementara di aplikasi kita mulai penuh, sehingga komputer akan membaca memori manapun, yang barang kali ia akan membaca memori sebelum kode tersebut dirubah

Solusi

Maka dari itu kita harus membersihkan cache cache ini hingga bersih. Sehingga aplikasi kita/komputer kita bisa secara tertaur mengenali segala perubahan

Langkah Langkah

Masukkan perintah berikut. Pada directory aplikasi kalian

 npm cache clean --force

Lalu restart metro yang sudah dirunning

npm start

Lalu build android emulator kalian dengan perintah

npm run android

 Kesimpulan

Ketika aplikasi mengirimkan error sedangkan kita merasa yakin bahwa kode sudah berjalan dengan baik apalagi error yang dikirimkan adalah error: Error: Unable to resolve module. Maka pastikan cache sudah dibersihkan total

 

Ketika kita menggunakan aplikasi android, terkadang kita menjumpai beberapa komponen yang berfungsi apabila kita menyentuhnya maka aplikasi tersebut akan menyajikan segala pilihan menu sesuai kebutuhan kita

Contohnya seperti yang terjadi pada aplikasi ini

Tab Bottom yang menyediakan tombol untuk Home, Order, dan Profile

Bagaimana cara membuatnya? Ternyata ada beberapa langkah yang harus diikuti

Langkah Langkah

Instal package menggunakan perintah berikut

npm install @react-navigation/bottom-tabs@^5.x

 Atau kalian bisa melihatnya pada documentation resminya 

Lalu kita tambahkan kode ini pada file index.js pada folder route kita yang sudah kita terapkan sesuai dengan prinsip Atomic Design

Baca Juga: Belum Tahu Atomic Design? Pelajari Sekarang Juga Disini!

./src/routes/index.js

Lalu, buat component untuk tiap tiap halaman Profile, Home, dan Order. Untuk pembuatan tahap awal boleh menggunakan kode yang sederhana saja atau setidaknya menampilkan teks yang menjelaskan tiap tiap components. Contohnya seperti ini

Tambahkan kode ini di dalam <Stack.Navigator></Stack.Navigator>

Sehingga keseluruhan kode akan seperti ini

Kesimpulan

Dalam membuat Navigasi Tab pada React Native harus menginstal package dan membuat sebuah komponen yang mengarahkan pada suatu halaman. Lalu masukkannya kedalam stack yang merupakan isi dari sebuag router