19.12.20 리덕스 사가의 패턴

리덕스 사가 effect에서 자주 쓰이는 함수

call

• 함수의 동기적인 호출을 할 때 사용
• ex) 응답이 다 받아진 후에 LOG_IN_SUCCESS 실행할 때 사용

function* login() {
    try {
        yield call(loginAPI);
        yield delay(1000);

fork

• 함수의 비동기적인 호출을 할 때 사용
• ex) call 과 다르게 순서 상관없이 실행해야할 때 사용

export default function* userSaga() {
    yield all([
        fork(watchHello()),
        fork(watchLogin()),

put

• 액션 함수 (dispatch)로 진행시킬 때 사용

takeEvery

• 모든 액션을 유효하게 인정한다
• while (true) 로 감싸는 효과
• ex) 로그인 버튼을 눌러 LOG_IN 요청을 받고 LOG_IN_SUCCESS를 실행시키는 비동기 작업에서 while (true) 혹은 takeEvery를 사용하지 않으면 그 다음 로그인 버튼을 눌렀을 시 LOG_IN 요청만 받고 이후에 실행되어야할 (put되어야 할) 동작이 이행되지 않는다

takeLatest

• generator 함수에서 마지막 액션 하나만 유효하게 인정하고 싶을 때
• ex) 실수로 로그인 버튼을 연달아 2번 누르는 경우 서버로 요청이 2번 가지 않도록 할 때 사용한다

파일구조
sagas/index.js - user사가, post사가를 모아둔 root사가
sagas/post.js
sagas/user.js

user.js

import { all, fork, call, put, take, takeLatest, takeEvery } from "redux-saga/effects";
import { LOG_IN_REQUEST, LOG_IN_SUCCESS, LOG_IN_FAILURE } from "../reducers/user";

const LOG_IN = "LOG_IN";

function loginAPI(){
    // 서버에 요청을 보내는 부분
}

// 3
function* login(){
    try {
        // call : api 동기 호출
        yield call(loginAPI);
        // 서버 호출 끝나면 로그인 성공
        yield put({
            type: LOG_IN_SUCCESS
        });
    } catch (e) {
        console.error(e);
        // 로그인 실패
        yield put({
            type: LOG_IN_FAILURE
        });
    }
}

// 2
function* watchLogin(){
    yield takeEvery(LOG_IN, login)
}


export default function* userSaga() {
    yield all ([
    	// 1
        fork(watchLogin)
    ]);
}

1. watch로그인 액션 등록을 한다
2. watch로그인 함수가 takeEvery인지 takeLatest인지 결정을 한다
3. 실제 동작 함수

pages/index.js

...
const Home = () => {
	const { isLoggedIn } = useSelector(state => state.user);
    const dispatch = useDispatch();
        useEffect(() => {
          dispatch({
              type: "LOG_IN"
          });
    	}, []);
...

인덱스 페이지에서 dispatch로 실행