Tutorial React Native State Management Redux Lengkap

Ok Konsep Koding kali ini akan berbagi tutorial programing, tutorial kali ini adalah Tutorial React Native. Dimana di tutorial ini kita akan bersama-sama mepelajari State Management Redux. Di tutorial ini akan di kupas tuntas mengenai kenapa kita harus menggunakan Redux, setup Redux pada project React Native, Membuat reducers pada Redux, membuat Actions pada Redux dan menghubungkan Redux ke Component React Native.

Tutorial React Native State Management Redux Lengkap

Apa Itu Redux?

Redux adalah wadah State atau Props yang dapat diimplement untuk aplikasi JavaScript. Ini membantu Anda menulis aplikasi yang berperilaku konsisten, berjalan di lingkungan yang berbeda (klien, server), dan mudah untuk diuji. Sederhananya, Redux adalah alat manajemen state yang bersifay Global.

Kenapa Kita Harus Memakai Redux?

Jadi misal kamu membuat sebuah project besar, entah itu menggunakan React atau React Native dan kamu memiliki ratusan Komponen aplikasi, dan setiap komponen tersebut memiliki data (State) yang digunakan di banyaka Komponen, akan sangat komplex jika kamu mengrim state langsung dari komponen dan aplikasi atau project yang kamu buat akan sangat untuk di baca dan di testing. Nah kerane itu munculah Redux jadi dengan Redux semua State/Data/Props/Function dapat di gunakan di semua Class/Component/Screen yang kamu buat.

Bagaimana Redux Bekerja?

Untuk memahami konsep Redux dan bagaiaman Redux bekerja kamu bisa melihat diagram gambar di bawah ini:

Cara Kerja Redux

Ketika User melakukan Action  -> maka akan mentrigger State pada Reducer -> setelah itu Data di Reducer disimpan ke Root State Global (Store) -> Lalu di tampilkan kepada USER

Apa Yang Akan Kita Pelajari?

Yah sebelum kamau mempelajari ini, kita asumsikan kamu sudah memahami State dan Props pada Vanilla JS dan kamu sudah memahami mengenai React Native/ React.js walaupun masih dasar. Karena ini sudah masuk ke dalam topik yang sudah advanced.

1. Instalasi Dan Setup Redux

2. Menghubungkan Redux Ke Global Aplikasi  (Reducer dan Store)

3. Menghubungkan Ke Komponen

4. Mendispatch Action

Memulai Project

1. Pertama buat project baru terlebih dahulu dengan perintah 

npx react-native init project

2. Kemudian install library redux, react-redux dan react-navigation

npm i redux react-redux

3. Install Library React Navigation bisa menggunakan versi 4 atau versi 5, terserah kamu

https://reactnavigation.org/docs/getting-started/

https://reactnavigation.org/docs/4.x/getting-started/

Kalau kamu ingin lebih cepat dan langsung ke inti materi, kamu bisa mengclone project kosongan yang sudah saya intsall library agar bisa langsung mengikuti tutorial ini. Di github saya :  Project Kosongan Yang Sudah Terinstall Library

Masuk Ke Materi 

1. Pertama masuk ke Root Project Kamu dan buat 5 folder seperti di bawah ini:

Tutorial React Native State Management Redux Lengkap

Folder src yang di dalamnya ada folder actions, reducers, routes dan views.

Membuat Action (di dalam folder actions)

 1. Buat file dengan nama loginAction.js, dan ketikan kode di bawah ini

2. Kemudian buat file types.js lalu ketikan kode di bawah ini:


3. Membuat index.js untuk mengexport semua function action kita


Membuat Reducer untuk Initial State kita (di folder reducers)
1. Kita buat sebuah file baru dengan nama loginReducer.js  kemudian ketikan kode di bawah ini:

2. Kemudian buat index.js pada folder reducer hal ini berguna untuk memanggil reducer yang telah kita buat

Menghubungkan ke Store global Project
1. Pertaman di root project anda pasti ada file index.js dan ubah menjadi seperti kode di bawah ini

Membuat routes untuk navigasi (di Folder routes)
1. Kemudian di folder routes buat sebuah file dengan nama index.js lalu ketikan kode di bawah ini:

Mengubah file App.js
1. Kemudian ubah file App.js menjadi seperti kode dibawah ini :

Membuat Views dan menghubungkan Redux ke Component React Kita
1. Buat File dengan nama Login.js dan Home.js

Ok akhirnya kita selesai membuat aplikasi React Native menggunakan redux, lalu apa selanjutnya ? pastinya kita menciba aplikasi kita. run aplikasi kita dengan command:

npx react native run-android atau npx react-native run-ios

Jika kamu berhasil maka akan seperti gambar di bawah ini :

Tutorial React Native State Management Redux Lengkap

Tutorial React Native State Management Redux Lengkap

 

Kesimpulan

Sekarang kamu bisa menggunakan State datanya di semua component yang kamu mau dengan hanya menghubungkan ke komponent mu dengan syntax connect  dari redux, mungkin kamu berfikir kode nya jadi sangat banyak, tapi tenang itu hanya saat pertama kali jika kamu sudah menyeting di project mu untuk selanjutnya kamu hanya perlu membuat actions dan reducers saja.

Baca Juga :
#1 Pengenelan React Native Dan Cara Instalasinya Lengkap
#2 Tutorial React Native State Dan Props Serta Penjelasannya
#3 Tutorial Menampilkan Gambar React Native Yang Baik & Benar
#4 Tutorial React Native Alert, Beserta Jenis-Jenisnya Lengkap
#5 Tutorial ClickListener Pada React Native Serta Penggunaannya
#6 Tutorial React Native: Text Italic, Bold, Underline dan Styling
#7 Tutorial Membuat Custom TextArea Pada React Native

#8 Tutorial React Native Mengubah Warna Pada Placeholder
#9 Tutorial React Native : Advanced Webview Dengan Loader

#10 Tutorial Open Link Url Website Di React Native
#11 Tutorial React Native WhatsApp Direct Send Link
#12 Tutorial React Native Modal Dengan Desain Gambar
#13 Tutorial React Native : React Navigation 5 Untuk Navigasi
#14 Tutorial React Native : Mengirim Data Pada React Navigation
#15 Tutorial React Native Top TabView Gesture Lengkap
#16 Tutorial React Native : Animation JSON Lottie
#17 Tutorial Dan Penjelasan Lifecycle Pada Classes React Native
#18 Tutorial Get API React Native Yang Baik Dengan Axios
#19 Tutorial Get Detail Data React Native Axios Github API
#20 Tutorial Date Time React Native Membuat Aplikasi Stopwatch