Engineering

Penggunaan Redux Untuk React Native

BY

Luluk Oktaviani

|

Dalam artikel ini akan dibahas prinsip penggunaan Redux dalam framework React Native. Untuk kalian yang baru pertama kali mendengar istilah Redux, saya sarankan untuk membaca artikel Konsep Sederhana Redux terlebih dahulu. Artikel tersebut membahas Redux dari sisi konseptual dengan sangat baik juga disertai dengan ilustrasi yang mudah dimengerti.

Pada dasarnya, ada tiga fungsionalitas utama yang ditambahkan oleh Redux ke dalam sebuah aplikasi, yaitu

  1. Tempat untuk menyimpan keseluruhan state aplikasi
  2. Mekanisme untuk men-dispatch action ke dalam reducer
  3. Mekanisme untuk memberi tahu setiap kali update state terjadi

Secara tidak langsung, ketiga hal tersebut menjelaskan prinsip kerja Redux. Dari penjelasan tersebut dapat disimpulkan bahwa Redux menyimpan state aplikasi yang hanya bisa diubah melalui action yang di-dispatch ke dalam reducer. Penjelasan lebih rinci dari konsep ini akan dibahas kemudian.

Setiap aplikasi yang mengimplementasikan Redux akan memiliki data flow yang searah. Dengan kata lain, setelah mengimplementasikan Redux, aplikasi React Native yang kalian buat akan memiliki skema data flow sebagai berikut

Skema data flow di atas memiliki empat komponen utama, yaitu Action CreatorReducerStore, dan View

Sesuai dengan namanya, Action Creator pada dasarnya adalah suatu fungsi yang menghasilkan action. Jika kalian ingat prinsip Redux yang dijelaskan di awal, action diperlukan untuk mengubah state. Dalam konteks ini, action adalah sebuah objek Javascript. Menurut konvensi, setiap objek action harus memiliki properti type. Properti ini diperlukan untuk pemrosesan lanjut dari action tersebut. Namun, tentu saja action boleh memiliki properti lain selain type.

const actionCreator = function() {
    // create and action and return it
    return {
        type: 'ACTION_A'
    }
}

Komponen selanjutnya adalah store. Seperti yang dijelaskan di awal, store adalah tempat untuk menyimpan keseluruhan state aplikasi. Karena state hanya bisa diubah melalui actionstore memerlukan komponen lain bernama reducer untuk memproses action. Dalam definisi yang sederhana, reducer dapat diartikan sebagai komponen yang berfungsi untuk mengubah state dalam aplikasi. Reducer menerima dua parameter, yaitu state dan actionReducer akan memproses action sesuai dengan tipenya. Penting untuk diingat bahwa hasil akhir dari reducer adalah sebuah state baru.

import { createStore } from 'redux'

const reducer = function (state = {}, action) {

    switch (action.type) {
        case 'ACTION_A':
            return {
                ...state,
                message: action.value
            }
        default:
            return state;
    }
}

const appStore = createStore(reducer)

Sekarang, hal terakhir yang perlu dilakukan untuk membuat Redux bekerja adalah menghubungkan action dengan state yang ingin diubah. Hal ini dapat dilakukan melalui metode dispatch yang dimiliki oleh store. Metode dispatch mengirimkan action ke dalam store untuk selanjutnya diproses oleh reducer.

var setActionA = function (name) {
    return {
        type: 'ACTION_A',
        name: name
    }
}

appStore.dispatch(setActionA('Action setter'))

Hingga titik ini, kalian telah mengetahui prinsip dasar penggunaan Redux dalam aplikasi React Native. Kalian telah mengetahui komponen-komponen utama dalam Redux, seperti storeaction, dan reducer beserta interaksi yang terjadi antarkomponen tersebut. Kalian juga telah mengetahui bagaimana mentranslasikan konsep dasar Redux dalam bentuk kode Javascript. Selanjutnya, langkah terakhir yang perlu dilakukan adalah mengintegrasikan Redux dengan komponen view. Langkah ini diperlukan agar komponen view dapat memberikan respon yang seharusnya setiap kali terjadi perubahan state. Mekanisme ini akan menjadi topik pembahasan dalam artikel selanjutnya

Hubungkan dengan kami

Ikuti refactory

Case Studies

The current query has no posts. Please make sure you have published items matching your query.
Tag
×