<aside> ❗ 특정한 액션 타입이 전달될 때, 사이드 이펙트 없이 비동기 작업을 실행하기 위한 미들웨어

</aside>

Generator 함수(사가 함수)

function* generatorFunction() {
	console.log('generator 시작')
	yield 1

	let a = yield
	console.log('a 값을 받음')
}

• redux-saga 에서 쓰이는 기본적인 함수의 문법이다.
• function* 키워드를 사용한다.
• yield 키워드를 통해 비동기 작업을 쉽게 수행할 수 있다.
• Generator.next() 함수를 호출하면 첫 번째 yield 코드까지 실행한다.
• 다시 Generator.next() 함수를 호출하면 다음 yield 까지 실행한다.
• yield가 어떠한 값도 반환하지 않을 때, next 함수로 인수를 전달하면 Generator 함수 내부에서 yield가 인수로 대체된다.

effect 함수

npm i redux-saga

import { delay, put, call, takeEvery, takeLatest, all } from 'redux-saga/effects'

function* rootSaga() {
	yield <u>**all**</u>([fork(takeSaga), ...])  // 모든 제네레이터 함수 동시 실행
}

const sagaMiddleware = createSagaMiddleware()  // 사가 미들웨어 생성
const store = createStore(rootReducer, applyMiddleware(sagaMiddleware)) // 사가 미들웨어 등록

sagaMiddleware.run(rootSaga) // 루트 사가 실행

// 액션을 지켜보는 사가 함수에 의해 실행되는 사가 함수
function<u>*****</u> saga(action) {
	yield <u>**delay**</u>(1000)
	yield <u>**put**</u>({ type: 'INCREASE' })

	const data = yield <u>**call**</u>(No 제네레이터 함수, action.data)
	yield <u>**fork**</u>(제네레이터 함수)
}

// 액션을 지켜보는 사가 함수
function<u>*****</u> takeSaga() {
	yield <u>**take**</u>(A, saga)
	yield <u>**takeEvery**</u>(A, saga)
	yield <u>**takeLatest**</u>(A, saga)
}

• effect 함수들은 yield 키워드 뒤에서 호출된다.

1. all : 배열 안에 있는 여러 사가들을 등록한다.
2. put : 새로운 액션을 dispatch 한다. dispatch 함수와 유사
3. delay : 코드를 진행하기 전, 딜레이 시간을 준다.
4. take : A 타입 액션이 실행되면 B 제네레이터 함수가 처리한다. 실행된 A 타입 액션은 B 제네레이터 함수의 인자로 전달된다.
5. takeEvery : dispatch된 모든 A 타입의 액션을 B 제네레이터 함수가 처리한다.
6. takeLatest : 가장 마지막으로 dispatch된 A 타입의 액션만을 B 제네레이터 함수가 처리한다. 이미 작업하고 있던 액션이 있더라도 새로운 액션이 들어오면 기존 액션의 작업을 멈추고 새로운 액션의 작업을 시작한다.
7. call : 첫 번째 인자로 특정 함수를 전달하고, 두 번째 인자는 첫 번째 인자 함수의 인자로써 사용된다. call 함수는 결과가 반환될 때까지 기다린다. (동기)