Redux-Saga의 Effect에 대해 알아보자

현재 나는 Redux-Saga를 배우고 사용하는 중이다. 처음이라 그런지 모르는 것 투성이에 헷갈려 정리를 해보고자 한다.
[Redux-Saga 공식문서]:https://github.com/mskims/redux-saga-in-korean

Redux의 대해서는 추후에 정리를 할 예졍이니 이 글에서는 Redux-Saga를 중점으로 작성해보고자 한다.

Redux-Saga와 Redux-Thunk

서버와 통신을 할 때 Saga와 Thunk는 비슷한 역할을 하지만 서로 다른점이 있다.
서로의 장단점을 간단하게 정리해보고자 한다.

Redux-Saga

• 장점: Effect에서 제공하는 여러가지 옵션을 통해 미들웨어와 다양한 통신이 가능하다.
• 단점: Thunk에 비해 코드 양이 많아진다.

  Redux-Thunk

• 장점: 코드 양이 적어 간단한 프로젝트에서 사용하기 좋다.
• 단점: Saga에서 제공하는 옵션들이 없기 때문에 이러한 옵션을 사용하기 위해서는 스스로 구현을 해야한다.

Effect란?

Saga의 로직을 표현할 때 JavaScript의 생성자 함수에서 제공하는 yeild를 사용한다.
그리고 Effect는 Saga에서 제공하는 객체로 미들웨어에 전해지는 명령어들을 담고 있다.

이러한 Effect를 사용하기 위해서는 redux/saga/effects 패키지에 있는 함수들을 사용해야 한다.
그렇다면 Effect에서 제공하는 기본 이펙트에 대해서 정리해보고자 한다.

all()

all함수는 Effect로 이루어진 배열들을 받아 받은 배열들을 한번에 모두 실행시켜준다.

yeild all([
  fork(), 
  call()
]);

fork()

fork함수는 비동기 함수를 호출할 때 사용하는 함수이다.
fork함수를 다른 코드에 빗대어 보자면 아래와 같다.

yield fork(post); // fork 버전

axios.post('/api/post'); 

call()

call함수는 fork와 반대로 동기 함수를 호출할 때 사용하는 함수이다.
call함수를 다른 코드에 빗대어 보자면 아래와 같다.

yield call(post);

axios.post('/api/post')
    .then(result =>{
        type: 'POST',
        data: result.data,
    });

put()

put함수는 dispatch함수와 동일한 역할을 한다.

yield put({
    type:'POST',
      data:action.data,
});

dispatch({
    type:'POST',
      data:action.data,
});

take()

take함수는 call,put함수와 비슷하게 특정 작업을 해주는 함수이다.
하지만 take의 경우 1회용이기 때문에 재사용이 되지않는다.

yeild take("POST",data);

takeEvery()

take와 동일한 기능이지만 재사용이 가능하다.

yeild takeEvery("POST",data);

takeLatest()

take,takeEvery와 기능은 똑같지만 이 둘은 요청이 n개 오면 이 요청이 서버로 가게 되면 n개의 응답이 오게 된다.
이는 도스 공격과 같기 때문에 이를 방지하기 위해서는 takeLatest함수를 사용해야 한다.
takeLatest함수는 마지막 요청만 서버로 보내 응답을 받지만 요청 단계에서는 n개의 요청이 서버로 가게 된다면 n-1개의 요청을 모두 취소해버린 뒤 마지막 1개의 요청만 응답하게 된다.

yeild takeLatest("POST",data);

throttle()

throttle함수는 take,takeEvery,takeLatest기능은 비슷하며 takeLatest함수 처럼 중복된 요청을 방지하는 함수이다.
하지만 takeLatest와 가장 큰 차이점은 시간을 정한 뒤 지정한 시간내에 발생하는 중복된 요청은 모두 취소해버리게 된다.
그리고 1개의 요청만 서버로 보내게 된다.

yeild throttle("POST",data,2000);