redux-saga / all, fork, takeLatest, call, put 메서드 설명

import { all, fork, takeLatest, call, put } from 'redux-saga/effects';

function loginAPI(){

}

function* login(){
    try{
        yield call(loginAPI);
        yield put({
            type: LOG_IN_SUCCESS
        })
    }catch(E){
        console.error(e);
        yield put({
            type:LOG_IN_FAILURE
        })
    }
}

function* watchLogin(){
    yield takeLatest(LOG_IN, login);
}


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

fork는 함수 비동기적 호출

 

takeLatest ( LOG_IN ,login)

사가가 LOG_IN 액션 이들어오는지 기다림 

 

LOG_IN액션이 들어오면 login generator가 실행되서

loginAPI를 call (서버로 로그인요청이들어가고)

call은 함수 동기적호출

 

서버에서 로그인요청이성공하면 put이실행됨. 

(put이 액션dispatch)

 

 

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

const HELLO_SAGA = 'HELLO_SAGA';

function loginAPI(){ 
}

function* login(){
    try{
        yield delay(4);  //
        //yield call(loginAPI);
        yield put({
            type: LOG_IN_SUCCESS
        })
    }catch(E){
        console.error(e);
        yield put({
            type:LOG_IN_FAILURE
        })
    }
}

function* watchLogin(){
    yield takeLatest(LOG_IN, login);
}

function* helloSaga(){
    console.log('hello saga');
    yield take()
}


export default function* userSaga(){
    yield take(HELLO_SAGA);
    yield all([
        fork(watchLogin),
        helloSaga(),
    ]);
}

해당액션이 dispatch되면, 제너레이터를 next하는 이펙트가 take 

 

yield(중단점) 이기때문에, take가 HELLO_SAGA를 기다리겠다는 것.

HELLO_SAGA란 액션이 들어오면 재게가됨!

next를 안쓰는 이유는 사가미들웨어에서 알아서 next를해줌.(take함수안에next가 들어있음)

 

userSaga가에 등록된 이벤트들이 여러개면 all을사용.

userSaga는 이벤트리스너 역할.

 

 

 

거의 while(true) 로 사용됨 -> takeLatest, takeEvery지원

takeEvery

function* watchLogin(){
    while(true){
        yield take(HELLO_SAGA);
        console.log(1);
        console.log(2); 
    }
}

거의 while(true) 로 사용되니까, takeEvery로 감싸서 HELLO_SAGA액션이 들어오면,

뒤의 제네릭함수를 실행하는식으로 바꿀수있다.

function* watchHello(){
    yield takeEvery(HELLO_SAGA, function*(){
        console.log(1);
        console.log(2);
    })
}

 

 

takeLatest

function* watchHello(){
    yield takeLatest(HELLO_SAGA, function*(){
        console.log(1);
        console.log(2);
    })
}

만약에 HELLO_SAGA 액션이 여러번 일어날경우 latest..단어처럼 마지막것만 받아서 실행이되서

HELLO_SAGA액션은 여러번일어나지만 console.log(1)2는 한번밖에 일어나지 않음.

+takeLatest는 이전요청이 끝나지 않은게 있다면 이전요청을 취소 한다.

 

 

 

패턴

function* signUp(){  // (3)
    try{ 
        yield call(signUpAPI);
        yield put({
            type: LOG_IN_SUCCESS
        })
    }catch(E){
        console.error(e);
        yield put({
            type:LOG_IN_FAILURE
        })
    }
}

function* watchSignUp(){ 
    yield takeLatest(HELLO_SAGA, signUp ) // (2)
}
 

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

1. fork로 watchLogin 등을 이벤트리스너처럼 등록하고.

2. takeEvery 로할지(여러개요청하면 여러번실행할지), takeLatest(마지막요청만받을지) 결정해서

3. 해당기능 실행

 

 

call & fork

call은 서버로 요청을보낼때 응답이 오면 다음코드를 실행하고

fork는 응답이오던말던 다음코드실행해버림. (순서상관없을때)

 

 

 

race, cancle, select, throttle, debounce