이 글은 인프런 제로초님의 '[리뉴얼] React로 NodeBird SNS 만들기' 를 바탕으로 정리한 내용입니다.

saga 이펙트 알아보기

all, fork 등은 saga의 이펙트라고 불리는 녀석들이다. 루트 사가를 하나 만들어놓고 거기에 비동기 액션들을 넣어준다.

all

all은 안에 배열을 갖는다.

fork

함수를 실행한다는 뜻이다. 하지만 call이라는 다르다. fork나 call로 함수를 실행시키고, 그런 것들을 동시에 실행시켜주는게 all 이다.

요청에 실패할 경우에도 대비해야 한다.

성공 결과는 result.data,
실패 결과는 err.response.data에 담겨있다.

put

put 은 디스패치라고 생각하면 된다.

fork와 call의 차이?

function loginAPI() {
    return axios.post('/api/login')
}

function login() {
    try {
        yield put({
            type: 'LOG_IN_REQUEST',
        })
        const result = yield call(loginInAPI) 
        yield put({
            type: 'LOG_IN_SUCCESS',
            data: result.data
        })
    } catch (err) {
        yield put({
            type: 'LOG_IN_FAILURE',
            data: err.response.data,
        })
    }
}

fork를 사용하면 비동기 함수 호출이다. call은 동기 함수 호출이다.

const result = yield call(loginInAPI) 
axios.post('/api/login')
	.then(() => {
    	 yield put({
            type: 'LOG_IN_SUCCESS',
            data: result.data
        })
    })

call을 하면 login api가 return 할때까지 기다려서 result 에다가 넣어주는데, fork 를 하면 비동기이기 때문에 결과 기다리는 것과 상관없이 바로 다음 것이 실행된다. (non blocking)

yield 라는 함수가 await 와 비슷하다.

yield를 굳이 안붙여줘도 되는데 붙여주는 이유는?
사가는 테스트 할 때 매우 편리하다.