Redux-saga

Redux-Saga 정리

제너레이터의 개념을 가져와서 사용하게 되는 Redux-Saga

1. 아래와 같은 함수들을 Redux-Saga에서는 Saga라고 부른다.

function* watchFetchProducts() {
  yield takeEvery("PRODUCTS_REQUESTED", fetchProducts)
}

1. Saga의 put사용으로 dispatch 보내는 방법

import { all, fork, put, call, takeLatest } from "redux-saga/effects";

// 아래와 같이 api 결과를 핸들링하여 dispatch 가능
// 즉 액션을 발동시켜서 reducer가 실행된다는 이야기이다.
yield put({ type: GET_USER_TICKET_SUCCESS, data: result.data });

saga 이펙트 함수

• delay. 설정된 시간 이후에 resolve를 하는 Promise 객체를 리턴한다.
• all은 배열을 받고, 받은 이펙트를 등록 (실행 아님, 등록임!!)
• fork는 함수를 실행
• call은 동기함수호출 (api가 리턴할때까지 기다림), fork은 비동기함수 호출 (안기다리고 리턴 다음꺼 이동)
  • 중요! 통신할때는 무조건 call (yield가 await과 비슷)
• put은 특정 액션을 dispatch하도록 한다.
• select은 특정 state를 가져오도록 한다.
  -> select 생각못해서 쑈를 했습니다^^..

예시:

put({type: 'INCREMENT]})

→INCREAMENT action을 dispatch한다.

• take → 한번만 실행되고 이벤트 삭제됨
• takeEvery → ‘INCREASE_ASYNC’ action이 들어오면 increaseSaga 함수를 호출시켜준다.

예시:

takeEvery(INCREASE_ASYNC, increaseSaga)

→들어오는 모든 INCREASE_ASYNC액션에 대해 increaseSaga 함수 실행

• takeLatest → 클릭 실수로 2번 했을때, 앞 이벤트 무시 마지막 이벤트 실행(보통 이거 많이씀)
  • 이미 완료됬다면 실행해줌 -> 둘다 팬딩이면 뒤에꺼만
  • 주의! front -> back으로 2번 req를 보내긴함 -> 그러나 b->f로 res는 1번 보냄 (즉, 서버단에 저장 2번됬는지 확인 필요)
  • 즉 : 새로고침하면 2개가 반영될수있음
  • 위에꺼를 막기위해 throttle가 있음

Saga 환경설정

1. action 및 reducer 설정

2. rootSaga에 Saga import

export default function* rootSaga() {
 yield all([ ...tempSaga])
}

3. sagas/서비스명/파일이름 으로 saga 파일 지정

// 서비스 권한 조회
export function* tempfunction() {
    try {
        const response = yield call(Api.tempApi);
        if (response.resultCode === 200) {

        }
    }catch (error) {
        console.error(error);
    } finally {

    }
}

// Action이랑 Saga 연결
export default [
    takeLatest(temptypes.GET_TEMP_REQUEST, tempSaga.tempfunction),
];

saga.js

1. store의 값 가져오기

// store값 지정
const check = (state) => state.store.check;
export function* test(action) {
   // 값 직접 사용
   const checkItem = yield select(check);
} 

2. saga 사용 ex)

• call로 api 호출
• put으로 store값 수정

export function* test(action) {
    try {
    	//call로 api 호출
        const response = yield call(Api.url, action.payload);

        if (response.resultCode === 200) {
          //put으로 store값 수정
          yield put({type: type.success, payload: data});
        }
    }catch (error) {
        console.error(error);
    } finally {

    }
}

3. export default ex)

export default [
    takeLatest(type.request, saga.name),
];