Pada kesempatan ini konsep koding akan berbagi tutorial mengenai Redux, kenapa redux?. karena Redux memiliki dokumentasi yang bagus, komunitas yang luas dan banyak digunakan oleh perushaan besar yang menggunakan Javascript sebagai basis kode aplikasi mereka. Nah pada tutorial ini akan di jelaskan mengenai Apa itu Redux Thunk, cara kerja Redux Thunk dan Implementasinya.
Tutorial React Native : Redux Thunk Get API
Tutorial React Native : Redux Thunk Get API


Apa Itu Redux Thunk?

Redux Thunk adalah sebuah  middleware yang memungkinkan Anda untuk menulis Action yang mengembalikan function, bukan action. Yah kita tau sendiri bahwa Redux mengembalikan dalam bentuk props actions yang telah di definisikan oleh Reducers namun masalahnya jika kita ingin mengembalikan sebuah function, redux tidak dapat menanganinya, oleh karena itu kita membutuhkan middleware yang berfungsi untuk mengembalikan action.


Cara Kerja Redux Thunk (Middleware Redux)?

Untuk memahaminya kita bisa  melihat kode simple javascript di bawah ini :

// Not Using Redux Thunk
let add = 1 + 2
console.log(add)

// Used Redux Thunk or Middleware Redux
function addFunc(num1, num2){
  return num1 + num2
}
console.log(addFunc(1,7))
console.log(addFunc(9,7))
Kesimpulannya jika kita menggunakan Redux Thunk maka kita dapat mengembalikan nilai nya menjadi function bukan hanya sebagai result.

Memulai Project

Untuk mengikuti tutorial ini anda diharuskan sudah memahami basic Redux, dan tutorial ini adalah kelanjutan dari tutorial : Tutorial React Native State Management Redux Lengkap, ya anda harus mengikuti tutorial sebelumnya, jika anda belum paham dan menguasai Redux.

Kita asumsikan anda telah menyelesaikan tutorial Tutorial React Native State Management Redux Lengkap, setelah itu silahkan tuliskan dan ubah kode-kode sebelumnya menjadi seperti gambar di bawah ini :


1. Buat action baru dengan nama fecthGithubAction.js  di folder actions

 2. Kemudian mengubah index.js di folder actions



3. Mengubah file types.js

4.Membuat file baru fecthGithubReducer.js di folder reducers


5.Mengubah file index.js di folder reducres

6.Mengubah file index.js di Root Project untuk mendaftarkan middleware Redux Thunk


7. Membuat file baru dengan nama ThunkExample.js di folder views untuk Screen baru aplikasi kita


8. Untuk berpindah halaman ubah file Home.js menjadi seperti kode di bawah ini:

9 Terakhir kita mengubah files index.js di folder routes untuk menambahkan routes baru pada aplikasi kita



Terakhir yang kita tunggu-tunggu sekarang jalankan  npx react-native run-android atau npx react-native run-ios kode yang telah kita buat maka hasilnya akan seperti gambar di bawah ini:

Tutorial React Native : Redux Thunk Get API
Tutorial React Native : Redux Thunk Get API

Sekian semoga tutorial Redux Thunk Get Api ini dapat bermanfaat untuk kita semua, bila ada ynag ingin ditanyakan silahkan tuliskan komentar di bawah.

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
#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
#21 Tutorial React Native State Management Redux Lengkap