Panduan Stately React-Native dan Redux
“Jangan Tertekan dengan error, error adalah temen kita”
React Navigation merupakan merupakan library routing default untuk React-Native.tapi kita juga butuh penyesuaian.
Dalam React-Navigation kita dapat mengatur Function,untuk status navigation pada Redux.
By default, React-Navigation akan memanage State dalam,Dalam Redux kita dapat menyimpan state kita kedalam Local Storge dengan Tool Redux persist.
Keuntungan kita menggunakan React Navigation adalah kita bisa mengcustom Component-component sesuai yg kita inginkan.
Berikut adalah web resmi React-navigation untuk intregrasi Redux, documentation on integrating Redux.
Initialization
saya akan memulai dari command:
$ react-native init React-NavigationRedux
Command diatas berfungsi untuk pembuatan app baru untuk react-native.
$ npm i react-navigation redux react-redux redux-logger --save
Command diatas berfungsi untuk pengisntallan package yg akan kita gunakan.
React-Navigation : Menghadle fungsi routing dari screen ke screen.
Redux : Memanage state kedalam store.
React-Redux : Merupakan Provider Yang akan digunakan ke dalam redux.
Redux-logger: Murupakan tool yg berguna untuk menangani debbuger pada state milik store.
Ok,Langsung saja kita mulai dengan pembuatan file Navigator.js:

Apa itu Redux ?
Redux dikenal sebagai library untuk mengelola state.
Redux itu ibarat database di frontend
Redux itu ibarat database di sisi frontend. Sepertinya layaknya database kita bisa melakukan operasi database seperti query,filter,insert,delete. Jika anda dari background MVC ( Model View Controller ) redux mirip seperti Model dan Controller. Redux tidak menyebutnya database tapi store.
Konsep redux sebenarnya tidak rumit.Redux hanya memiliki satu “Store”.
Store berfungsi menyimpan state dan data,Untuk pengubahan data.kita gunakan “dispatch” dan “action” pada storenya.
dan disini Action harus menyertakan properti :
const action = {
type: 'USER_LOGGED_IN',
payload: { user: 'Daniel' }
}store.dispatch(action)
Kemudian action untuk mengembalikan objek maupun data pada status baru pada store:
untuk mengakses data kita harus memanggil store.getState().selanjutnya action berada pada atas dispatched. store.getState().user
store: Repository singgle untuk datadispatch: Sebuah methodstoreuntuk kita gunakan mempassing actions ke reducer yg akan kita update/kirim di store.action: Sebuah object dengantypeproperty untuk mendiskripsikan yang akan menghasilkan perubahan state.reducer: Fungsi yg menerima dan mengirim status dari redux.dan mengembalikan objek status baru
Menambahkan Redux Ke dalam Aplikasi
untuk pembuatan redux kita harus menginitialkan :
Selanjutkan Kita mengimport Reducer kedalam App.js dan menyeting Redux Store:
Connecting Di Navigator
kita akan gunakan fungsi connect,
dan kita masukan dengan keselarasan react navigationnya:
dan kita perlu panggil kembali Initial navigation state:
Jika kita Log initialstate kita akan melihat object:

mari kita perbarui Reducer untuk mengembalikan status navigation yg benar yg perlu kita ubah adalah return value:
Menggati Router
Saya ingin menggati bagian atas.
jadi saya akan menambahkan replace: true ke navigation param saya.dan saya akan menambahkan lagi params.replace === true :
dan disini saya akan menggabungkan satu larik dari router saya dan kemudian saya turunkan Index:
Dan akan terlihat Hasil:

setelah itu kita cek apakah screen bekerja pada setiap detiknya dan membuat request,dll.
kita akan tambahkan pada reducernya:
sekarang kita panggil props.navigation.state.params.active .
dan kita log pada componentDidMount:
Untuk bonus Saya akan Mengajarkan penambahan Redux Persist:
ok pertama kita harus menambahkan atau menginstall packagenya dengan cara:
$ npm i redux-persist --savebiasanya saya akan menggunakan combineReducers dari redux.
tapi redux-persist provides combinePersistReducers .
maka dari itu kita akan buat config objek dan mempassing combinePersistReducers.
berikut adalah hasil final code pada app.js nya:
Saya Ricky https://rikisetiyopambudi.herokuapp.com/
