Redux-saga - Generator 문법

리덕스 사가는 리덕스 떵크와 함께 가장 많이 쓰이는 비동기 작업 관련 미들웨어이다. 리덕스 사가는 액션을 모니터링 하고 있다가 특정 액션이 발생하면 어떠한 특정 작업을 하는 미들웨어이다. 리덕스 사가를 사용하면 여러 까다로운 작업을 처리할 수 있다. 예를 들어, 비동기 작업을 진행할 때 기존 요청을 취소할 수 있다. 또는 맨 처음/맨 마지막 액션만 처리하거나, 특정 액션이 발생 했을 때 이에 따라 다른 액션을 디스패치하거나 자바스크립트 코드를 실행할 수 있다.

 

또, 웹소켓을 사용하는 경우 Channel 이라는 기능을 사용하여 더욱 효율적으로 코드를 관리할 수 있다. 또, 비동기 작업이 실패했을 때 재시도 하는 기능을 구현할 수도 있다.

 

리덕스 사가는 자바스크립트의 제너레이터 (Generator) 라는 문법을 사용한다. 제너레이터 문법은 다음과 같은 작업을 할 수 있다. 예를 들어, 함수의 흐름을 특정 구간에 멈추어 놓은 후, 이후에 다시 실행할 수 있다. 또한, 결과값을 여러번 내보낼 수도 있다. 예를 들어,

위와 같은 함수가 있다면 맨 윗줄, 1만 반환하고 함수가 종료될 것이다. 그러나 제너레이터 함수를 쓴다면,

위와 같은 형식으로 작성을 하게되는데, 함수 옆에 별표 (*)를 찍어 제너레이터 함수임을 명시한다. 그 후, yield라는 명령을 써 값들을 내보낼 수 있고, 또 yield를 기준으로 함수의 흐름을 멈춰놨다가 다시 실행하는 등의 행동을 할 수 있다.

 

제너레이터 함수는 만든 후, 어떤 새로운 객체에 넣어주면서 시작이 된다. 선언을 한 후, 바로 generator의 상태를 보면 suspended라고 쓰여있다. 말 그대로 멈춰있다는 뜻이다. 이제 generator.next()라는 명령을 실행하면, generator 함수는 다음 yield가 오기 전까지의 작업들을 수행하고, yield에서 내보낼 값을 내보내며, done이 true인지 false인지를 보여준다. 이렇게 yield가 남아있기 전까지 계속 반복하다가, 마지막 return에서의 값을 내보낸 후, 함수가 종료된다. 그 후, generator의 상태를 다시 보면 closed라고 되어있다. 말 그대로 함수가 순차적으로 할 일을 모두 종료한 후, 닫힌 것이다.

 

또한 이런식으로도 사용 가능하다.

위와 같이 a라는 변수에 yield로 인자를 전달 받아 저장하고, 이를 제너레이터 함수 내부에서 사용할 수 있다. 인자의 전달은 next(값)으로 할 수 있으며, 이를 통해 일련의 작업들을 한 후, 값을 반환할 수도 있다. 또한 끝나지 않는 함수도 만들 수 있다. 아래를 보자.

result값에 0을 저장한 후, 제너레이터 함수에 인자가 전달될 때마다 값을 result에 더해주는 함수이다. 이를 통해 손쉽게 계산기 기능도 구현할 수 있을 것 같다.

아무튼, 제너레이터 문법은 위와 같다. redux-saga는 제너레이터에 기반한 미들웨어이다.