Redux Saga

• 비동기 작업 관련 미들웨어로, thunk는 함수를 디스패치 할 수 있게 해줬다면 saga는 액션을 모니터링하고 있다가 특정 액션이 발생하면 이에 따라 특정 작업을 하는 방식으로 사용함. 특정 작업이란 특정 자바스크립트 실행이나 다른 액션을 디스패치하거나 현재 상태를 조회
• redux-thunk로 다루기 까다로운 다양한 작업을 처리할 수 있음
  - 비동기 작업을 진행할 때 기존 요청을 취소 가능
  • 특정 액션이 발생했을 때 이에 따라 다른 액션을 디스패치 하거나 자바스크립트 코드를 실행할 수 있음
  • 순수 액션(타입 객체)를 사용해 수행 가능함
  • 웹소켓을 사용하는 경우 Channel이라는 기능을 사용해 더욱 효율적으로 코드 관리 가능
  • 비동기 작업이 실패했을 때 재시도하는 기능을 쉽게 구현할 수 있음
• redux-saga는 Generator에 기반한 미들웨어!

JavaScript Generator!

Generator는 자바스크립트의 문법으로, 함수의 흐름을 특정 구간에 멈춰놓았다가 다시 실행할 수 있고 결과값을 여러 번 내보낼 수 있는 작업을 할 수 있음.

예시 1

function* generatorFunction() {
    console.log('안녕');
    // yield를 사용하면 함수의 흐름을 멈춰놨다가 1이라는 값을 반환함(!==리턴)
    yield 1;
    console.log('제너레이터 함수');
    yield 2;
    console.log('function*');
    yield 3;
    return 4;
}

// 호출하고 난 결과물을 generator 라고 부름.
const generator = generatorFunction();

suspended는 현재 제너레이터가 잠깐 멈춰있다. 함수를 처음 호출했을 때는 제너레이터가 멈춰있다는 뜻임. 시작하려면 next() 라는 함수를 호출해야 함.

done이라는 값이 true가 될 때까지 계속 next 하면 마지막 리턴 값이 와있음.

closed 돼있음! 이제부턴 next를 아무리 호출해도 undefined만 보여줌.

예시 2

function* sumGenerator() {
	console.log('sumGenerator가 시작됐습니다');
	let a = yield; // 우리가 제너레이터를 만들고next를 호출할 때 넣어주는 파라미터를 변수에 담을 수 있음
	console.log('a 값을 받았습니다');
	let b = yield;
	console.log('b 값을 받았습니다');
	return a + b;
}

예시 3

끝나지 않는 제너레이터
infiniteAddGenerator가 시작되고 나면 while 문이 시작돼서 result에 next를 통해 받은 값을 더해주고 결괏값으로는 results를 주겠다.

function* infiniteAddGenerator() {
	let result = 0;
	while(true) {
		result += yield result;
	}
}

끝이나지않음

참고
MDN function*
vlpt redux-saga

TypeScript

Typescript로 블록체인 만들기

Classes

작성 중,,