프론트 작업용 지식 2 - Redux saga, generator

 

동기처리

참조 영상 : 링크

Redux 의 문제 : 모든게 동기처리다. 변경 요청이 들어가면 바로바로 반영되기 때문에, API 호출과 같은 비동기요청을 처리하려면 미들웨어를 써야한다. Redux 의 기능 확장을 위해 써는 것을 미들웨어라고 한다.

해당 문제를 해결하기 위한 미들웨어중 유명한 것이

1. Redux thunk -> 쉬운 대신 기능이 약하다.

2. Redux saga

3. Redux observable

 

Redux Saga

redux 의 특정 action 이 실행되는 것을 대기하다가 받아서 비동기 동작을 처리하고 결과에 맞게 또 다른 동작을 수행한다. 

export default function* rootSaga() {
    yield all([
        call(mySagaA),
        call(mySagaB)
    ])
};

function* myAPIRequest() {
    
}

function* myAPIFunction() {
    try {
        yield call(myAPIRequest)
        yield put({
            type: MY_API_SUCCESS,
        })
    }
    catch(error) {
        yield put({
            type: MY_API_FAILURE,
        })
    }
}

function* myFunctionA() {
    yield takeLatest(MY_API, myAPIFunction)
}


export default function* mySagaA() {
    yield all([
        fork(myFunctionA);
    ])
};

function* myFunctionB() {
}


export default function* mySagaB() {
    yield all([
        fork(myFunctionB);
    ])
};

 

Generator

읽을만한 포스팅 : 링크

function 뒤에 * 가 붙은 함수를 generator 라고한다.

generator 는 iterator 를 반환한다.

generator 안에서 함수 실행을 중간에 멈추면 (yield)

generator.next() 하여 yield 의 결과 값을 받아오고 다시 실행할 수 있다.

yield 는 비동기 프로세스의 return 과 유사하다.

 

Redux-Saga effect

관련 영상 : 링크

번역된 Redux 포스팅 : 링크 

 

fork : 함수의 비동기 호출

call : 함수의 동기 호출

put : Redux 액션 dispatch

all : saga 를 합치는 동작

takeEvery : 특정 액션이 수행되기를 기다리다 여러 개의 태스크를 동시에 수행한다.

 

takeLatest : 특정 액션이 수행되기를 기다리다 단 하나의 태스크만 수행한다.

cancel : 포크되었던 비동기 프로세스를 취소한다.

race : 포크되었던 비동기 프로세스중 먼저 끝난 것을 취한다.