Redux-Saga adalah perpustakaan middleware yang menangani tugas asinkron dengan efek samping, seperti API. Selain itu, kami dapat membaca status dan memanggil tindakan di Saga. Ini menggunakan fungsi generator untuk melakukan tugas async.

Berikut ini penjelasan mengapa kami menggunakan Saga dan cara menginstalnya. Kemudian, dibahas metode Saga yang berguna untuk menangani API.

Mengapa kami menggunakan Redux-Saga?

Tugas utama Saga adalah menangani panggilan API dan memperbarui status berdasarkan respons titik akhir! Salah satu keuntungan utama redux-saga adalah tes-ramah.

Sebelum bekerja dengan Redux-Saga, Anda harus terbiasa dengan Redux.

Bagaimana cara menginstal Redux-saga?

Ada dua cara untuk menginstal redux-saga berdasarkan manajer paket Anda:

npm install redux-saga

yarn add redux-saga

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

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});
    }
}

function* mySaga() {
    yield takeEvery("USER_FETCH_REQUESTED", fetchUser);
}

export default mySaga;

API dapat berupa sesuatu seperti ini:

import axios from 'axios';

const Api = {
    fetchUser: (userId) => {
        return axios.get(`...?userId=${userId}`)
    }
};

export default Api;

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

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

const sagaMiddleware = createSagaMiddleware();

const store = createStore(
    reducer,
    applyMiddleware(sagaMiddleware)
);

sagaMiddleware.run(mySaga);

Metode Saga

Metode yang paling sering digunakan akan dijelaskan sebagai berikut:

Pilih

Bunyinya dari pemilih (negara), berikut adalah contoh panggilan pilih.

const userId = yield select(userSelectors.getUserId);

Ini mengirimkan tindakan, misalnya:

yield put({type: "USER_FETCH_SUCCEEDED", user: user});

Itu memanggil fungsi async, seperti API, misalnya:

const user = yield call(Api.fetchUser, action.payload.userId);

Ia mengawasi setiap pengiriman tindakan untuk memanggil fungsi generator.

yield takeEvery("USER_FETCH_REQUESTED", fetchUser);

Ini sama dengan takeEvery satu-satunya perbedaan adalah ketika panggilan sebelumnya tertunda tidak menelepon lagi.

yield takeLatest("USER_FETCH_REQUESTED", fetchUser);

Redux-saga adalah perpustakaan untuk menangani tugas async di redux. Dalam artikel ini, dibahas mengapa dan bagaimana menggunakan Saga dan metodenya.