[Redux-Saga] 개념, 이펙트 요약 정리

1. 개요

2. Redux-Saga 개념

3. Redux-Saga 이펙트

---

Redux-Saga의 필요성

Redux는 순수함수여서 부수적인 효과 처리를 할 수 없다. 즉, HTTP 요청을 보내거나, 무언가를 로깅하거나, store에 접근하는 등의 사이드 이펙트(Side effects)를 수행하지 않는다. 

아래 코드 실행시 바로 state를 로그인으로 바꿔버린다. 

{type: :LOG_IN, data: {id: 'zeroch0', password: '1234'}}

 

하지만 실제로 프로세스는 서버쪽에 data가 전달되고, 

서버는 아이디/패스워드 data 확인 후,

로그인 성공이라는 응답을 보내고, 

그걸 다시 받아서 로그인 처리해야된다.

=> Redux는 바로바로 실행되기 때문에(동기적처리) 특정 시간 또는 특정 동작 이후에 액션을 실행할 수 없다.

이러한 이유로 Redux 요청 사이사이에 비동기 요청이 들어갈 수 있게끔  Redux-Saga라는 미들웨어를 이용한다.

 

Redux-Saga 외에도 Redux-Thunk라는 미들웨어도 있다. Redux-Thunk는 편리한 대신 기능이 약해서 실무에서는 Redux-Saga를 많이 사용한다고 한다.

---

Redux-Saga 개념

Redux-Saga는 애플리케이션에서 일어나는 사이드 이펙트(side effects, 부수효과) (데이터를 불러오는 비동기 처리나 브라우저 캐쉬에 접근하는 행위들)을 쉽게 관리하며 효과적인 실행, 손쉬운 테스트 그리고 에러 핸들링을 쉽게 해준다. 쓰레드와 같은 역할을 한다. 

 

React는 Redux 액션을 수행하면 Redux-Saga에서 디스패치하여 Redux의 액션을 가로챈다. 중간에 가로챈 액션의 역할을 수행 후 다시 액션을 발행하여 데이터를 저장하거나 다른 이벤트를 수행시킨다.

 

Saga는 제너레이터 함수를 적극적으로 사용한다. 

제너레이터 함수란 yield 키워드를 만나면 실행이 중지되고 나중에 그곳부터 다시 실행이 재개되는 함수이다.

---

이펙트(effects)

이펙트는 미들웨어에 의해 수행되는 명령을 담고 있는 일반적인 자바스크립트 객체다. 이펙트는 이벤트를 처리할 내용을 담고 있다. Saga는 이펙트들을 yield를 이용하여 호출하고 수행된 내용을 다시 돌려받아 그 다음 액션들을 수행한다. 결국 saga는 제너레이터를 통해 이펙트들을 수행하는 역할을 한다고 볼 수 있다. 

---

• call
  • 단순히 함수를 호출하는 용도로 사용한다. 동기적으로 함수를 호출할 때 사용한다.
  • 첫번째 파라미터는 함수이며, 나머지 파라미터는 해당 함수에 넣을 인수 값이다.
  • 액션이 발생하면 전달한 함수를 호출하여 실행한다. 

function* fetchSaga() {
	const result = yield call(api.fetchA, arg1, arg2);
    
    console.log(result);
}

 

• put
  • store에 인자로 들어온 특정 액션(action)을 디스패치(dispatch)하도록 한다. 
• fork
  • 함수를 호출하는 용도로 사용한다.
  • call과의 차이점은 call은 동기적, fork는 비동기적으로 함수를 호출할 때 사용한다. 즉, 순서 상관없이 실행할 때 사용한다. 
• all
  • 비동기처리가 필요한 함수들을 배열 형태로 받고, 받은 이펙트들을 등록한다. 
• take
  • 한 번만 실행되고 이벤트는 삭제된다. 
• takeEvery
  • 들어오는 모든 액션에 대해 특정 작업을 처리해준다. 
• takeLatest
  • 기존에 작업중이던 작업이 있다면 취소하고 가장 마지막으로 실행된 작업을 수행하는 함수이다. 
  • 두번 클릭 했을 때, 앞 이벤트는 무시하고 마지막 이벤트를 실행한다. (많이 사용)
  • 실수로 로그인이나 회원가입 버튼을 연달아 누르는 경우, 서버에 요청이 여러번 가지 않도록 할 때 사용한다.  
• takeLeading
  • 첫번째 이벤트만 실행되고 뒤 이벤트는 무시된다. 

---