Redux-Sagaเป็นไลบรารีมิดเดิลแวร์ที่จัดการงาน async ที่มีผลข้างเคียง เช่น API นอกจากนี้เรายังสามารถอ่านสถานะและเรียกใช้การดำเนินการกับ Saga ได้ มันใช้ฟังก์ชันตัวสร้างเพื่อทำงานแบบอะซิงโครนัส

โครงร่างต่อไปนี้อธิบายสาเหตุที่เราใช้ Saga และวิธีการติดตั้ง จากนั้นจะกล่าวถึงวิธีการที่เป็นประโยชน์ของ Saga สำหรับการจัดการ API

เหตุใดเราจึงใช้ Redux-Saga

หน้าที่หลักของ Saga คือการจัดการการเรียก API และอัปเดตสถานะตามการตอบสนองของปลายทาง! ข้อดีอย่างหนึ่งของ redux-saga คือการทดสอบที่เป็นมิตร

ก่อนทำงานกับ Redux-Saga คุณควรทำความคุ้นเคยกับ Redux เสียก่อน

จะติดตั้ง Redux-saga ได้อย่างไร?

มีสองวิธีในการติดตั้ง redux-saga ตามตัวจัดการแพ็คเกจของคุณ:

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 อาจเป็นดังนี้:

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

วิธีการซากะ

วิธีการที่ใช้มากที่สุดจะอธิบายดังต่อไปนี้:

เลือก

มันอ่านจากตัวเลือก (สถานะ) นี่คือตัวอย่างการโทรที่เลือก

const userId = yield select(userSelectors.getUserId);

มันส่งการกระทำเช่น:

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

มันเรียกใช้ฟังก์ชัน async เช่น API เช่น:

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

มันคอยดูการดำเนินการแต่ละครั้งเพื่อเรียกใช้ฟังก์ชันตัวสร้าง

yield takeEvery("USER_FETCH_REQUESTED", fetchUser);

มันเหมือนกับ take ทุกความแตกต่างเพียงอย่างเดียวคือเมื่อการโทรครั้งก่อนอยู่ระหว่างรอจะไม่โทรอีก

yield takeLatest("USER_FETCH_REQUESTED", fetchUser);

Redux-saga เป็นไลบรารีสำหรับจัดการงาน async ใน redux ในบทความนี้จะกล่าวถึงสาเหตุและวิธีการใช้ Saga และวิธีการต่างๆ