Redux-Saga effects

all

all은 여러 saga들을 하나로 합쳐준다

export default function rootSaga() {
	all([counter(), login(), post(), todo()])
}

delay

delay는 넣은 숫자만큼 밀리세컨드 단위로 delay가 된다

function* delaySaga() {
	yield delay(1000) // 1초
}

put

put은 dispatch랑 같은 거라고 생각하면 된다

function* delayIncreaseSaga() {
	yield delay(1000)
	yield put(increase())
}

take

take는 넣어준 type의 액션이 들어오면 아래 있는 것들을 이어서 실행시켜준다

function* increaseSaga() {
	while(true) {
		yield take(INCREASE)
		yield put(increase())
	}
}

takeEvery

takeEvery는 type과 콜백 함수를 매개변수로 받는데 넣어준 type의 액션이 들어오면 두 번째로 받은 콜백 함수를 실행시킨다

function* increaseSaga() {
	yield takeEvery(INCREASE, function*() {
		yield put(increase())
	})
}

takeLatest

takeLatest는 takeEvery와 비슷하지만 다른 점은 같은 타입의 액션이 동시에 여러 개가 들어왔을 때 takeLatest는 마지막 액션만 실행시킨다. 반면 takeEvery는 모든 액션을 전부 실행시킨다.

// increase 액션 10개가 동시에 들어와도 1밖에 증가 안 함
function* increaseSaga() {
	yield takeLatest(INCREASE, function*() {
		yield put(increase())
	})
}

fork, call

둘은 같은 작업을 하는 데 차이점은 비동기냐 아님 동기냐에 차이가 있다
fork는 비동기로 실행을 한다.
call은 동기로 실행된다.

function* Fork() {
  yield delay(1000);
  console.log("fork");
}

function* Call() {
  yield delay(1000);
  console.log("call");
}

function* ForkTestSaga() {
  yield fork(Fork);
  console.log("forkTest");
}
// ForkTestSaga 실행 결과
// forkTest
// fork

function* CallTestSaga() {
  yield call(Call);
  console.log("callTest");
}
// CallTestSaga 실행 결과
// call
// callTest

select

state를 가져온다
react-redux에 useSelector와 같다고 보면 된다

function* increaseSaga() {
	const state = yield select();
	console.log(state); // {counter: 0}
	yield put(increase());
}