Redux-Saga 는 API와 같은 부작용이 있는 비동기 작업을 처리하는 미들웨어 라이브러리입니다. 또한 Saga에서 상태를 읽고 조치를 취할 수 있습니다. 비동기 작업을 수행하기 위해 생성기 기능을 사용합니다.

다음은 Saga를 사용하는 이유와 설치 방법을 설명합니다. 그런 다음 API를 처리하는 데 유용한 Saga 메서드에 대해 설명합니다.

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

예를 들어 API와 같은 비동기 함수를 호출합니다.

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

생성기 함수를 호출하기 위해 각 작업 디스패치를 ​​감시합니다.

yield takeEvery("USER_FETCH_REQUESTED", fetchUser);

takeEvery 와 동일합니다. 유일한 차이점은 이전 호출이 보류 중일 때 다시 호출하지 않는다는 것입니다.

yield takeLatest("USER_FETCH_REQUESTED", fetchUser);

Redux-saga는 redux에서 비동기 작업을 처리하기 위한 라이브러리입니다. 이 기사에서는 Saga와 방법을 사용하는 이유와 방법에 대해 설명합니다.