Engineering

Mengenal Redux-Saga Dalam React Native

By

|

By

Redux-Saga

Mengenai seputar pemrograman menggunakan React Native, tidak mungkin tanpa membahas third-parties library yang mendukung dalam pengembangan aplikasi yang menggunakan React atau pun React Native. Dalam artikel kali ini kita akan membahas salah satu kerabat dari Redux yaitu Redux-Saga.

Apakah itu Redux-Saga? Lalu apa hubungannya dengan Redux dan pengembangan aplikasi di React Native? Kita mulai dari pembahasan paling awal dahulu, yaitu mengenali Redux-Saga dan kegunaannya.

Redux-Saga adalah…

Redux-Saga adalah library yang bertujuan untuk membuat side effects dari aplikasi seperti asynchronus data fetching atau mengakses cache dari browser menjadi lebih mudah untuk diatur, lebih efisien untuk mengeksekusi, dan terutama mempermudah dalam melakukan test maupun handling failures.

Redux-Saga memisahkan thread dalam aplikasi yang bertanggung jawab khusus untuk bagian side effects. Jelasnya, Redux-Saga adalah middleware, yang dalam ekosistem redux berarti proses thread yang dapat dimulai, pause, dan dibatalkan dengan melalui redux actions. Redux-Saga juga memiliki akses penuh terhadap state dan juga dapat melakukan dispatch dalam redux actions juga.

Redux-Saga secara umum menggunakan fitur Generators dari ES6 yang membuat arus asynchronous dari proses aplikasi bisa lebih mudah untuk dilakukan read, write, dan juga melakukan test atau logging, dengan hal tersebut proses asynchronous seakan-akan seperti proses synchronous.

Redux Cycle jika menggunakan Saga, gambar: medium.com/@psak.works

Contoh Penggunaan

Mari kita anggap akan melakukan proses fetching sebuah data dari remote server ketika melakukan button click.

class ButtonComponent extends React.Component {
  ...
  ButtonClicked() {
    // Akan mengirim payload berisi data dari userId
    const { userId, dispatch } = this.props
    dispatch({type: 'USER_FETCH_REQUESTED', payload: {userId}})
  }
  ...
}

Pada code di atas, ButtonComponent mengirimkan data berupa object kepada Store dari Redux. Nah, lalu kita akan membuat file sagas.js yang berisi algoritma untuk menerima semua proses actions yang membawa type USER_FETCH_REQUESTED, untuk nantinya file sagas.js akan melakukan API Call untuk mengambil data. Seperti di code berikut.

sagas.js

import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'
import Api from './api'

// worker Saga: akan berjalan ketika ada action USER_FETCH_REQUESTED
function* fetchUser(action) {
   try {
      const user = yield call(Api.fetchUser, action.payload.userId);
      yield put({type: "USER_FETCH_SUCCEEDED", user: user});
   } catch (e) {
      yield put({type: "USER_FETCH_FAILED", message: e.message});
   }
}

/*
  Memulai fetchUser setiap kali ada action `USER_FETCH_REQUESTED`.
  takeEvery() berarti dapat melakukan fetching data secara bersamaan.
*/
function* mySaga() {
  yield takeEvery("USER_FETCH_REQUESTED", fetchUser);
}

/*
  Untuk takeLatest().

  Tidak akan dapat melakukan fetching data secara bersamaan. Jadi, jika "USER_FETCH_REQUESTED" menerima dispatch ketika proses fetching sedang pending, maka proses pending akan dibatalkan dan proses terakhir kalinya lah yang hanya berjalan.
*/
function* mySaga() {
  yield takeLatest("USER_FETCH_REQUESTED", fetchUser);
}

export default mySaga;

Lalu, untuk menjalankan Saga, kita harus mengkoneksikan kepada Redux Store menggunakan createSagaMiddleware dari redux-saga. Seperti berikut.

store.js

import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'

import reducer from './reducers'
import mySaga from './sagas'

// membuat instansiasi the saga middleware
const sagaMiddleware = createSagaMiddleware()
// masukkan ke Redux Store
const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware)
)

// lalu jalankan saga middleware-nya
sagaMiddleware.run(mySaga)

Seperti itulah contoh sederhana dalam penggunaan Redux-Saga, jadi jika kita hanya menggunakan Redux, kita akan mengalami kesulitan dalam menangani dispatch dan action yang berhubungan dengan proses Asynchronous seperti salah satunya API Calling, maka peran Redux-Saga ini akan membuat anda dapat mengatur atau pun tracing setiap action ataupun dispatch di dalam aplikasi.

You might’ve used redux-thunk before to handle your data fetching. Contrary to redux thunk, you don’t end up in callback hell, you can test your asynchronous flows easily and your actions stay pure.

Referensi:

  1. https://redux-saga.js.org/
  2. https://medium.com/@psak.works/redux-saga-react-native-2b84463d7afe

Hubungkan dengan kami

Ikuti refactory

Case Studies

Tag

Programming, React Native, Redux-Saga

×