Redux-saga
Redux-saga는 Redux 애플리케이션에서 사이드 이펙트(side effects)를 더 쉽게 관리하고, 더 효율적으로 실행하며, 더 쉽게 테스트할 수 있게 해주는 미들웨어다. 사이드 이펙트는 데이터 fetching, 비동기 작업 및 순수하지 않은 함수(예: 날짜나 랜덤 값 생성)와 같은 작업을 포함한다. Redux-saga는 JavaScript의 ES6 기능인 제너레이터를 사용하여 비동기 흐름을 쉽게 읽고 쓸 수 있게 해준다.
Redux-saga의 핵심 기능
Action과 Reducer 사이의 흐름 제어: Redux-saga는 액션을 디스패치했을 때, 바로 리듀서로 가기 전에 중간에서 여러 가지 작업을 수행할 수 있는 기능을 제공한다. 이를 통해 복잡한 사이드 이펙트 관리를 더욱 쉽게 할 수 있다.
효과적인 비동기 작업 처리: Redux-saga는 다양한 헬퍼 함수를 제공하여, 비동기 작업(예: API 호출)을 효과적으로 처리할 수 있다. 이를 통해 비동기 로직을 쉽게 구성하고, 성공, 실패 액션을 쉽게 디스패치할 수 있다.
Redux-saga 헬퍼 함수
delay(ms): 주어진 밀리초(ms)만큼 기다린 후에 resolve되는 Promise를 반환한다.
put(action): 특정 액션을 디스패치한다. 리덕스 스토어에 액션을 보내는 역할을 한다.
call(fn, ...args): 함수를 호출하고, 그 결과가 반환될 때까지 기다린다. 주로 API 호출과 같은 비동기 함수 실행에 사용된다.
take(actionType): 지정된 액션 타입의 액션이 디스패치될 때까지 기다린다. 액션이 디스패치되면 해당 액션을 처리한다.
takeEvery(actionType, saga): 지정된 액션 타입에 대해 들어오는 모든 액션을 처리한다. 각 액션이 독립적으로 실행된다.
fork(saga, ...args): 비동기 함수를 백그라운드에서 실행한다. 부모 테스크와 독립적으로 실행되며, 부모 테스크는 fork된 테스크의 완료를 기다리지 않는다.
cancel(task): 실행 중인 테스크를 취소한다. 취소된 테스크는 더 이상 진행되지 않으며, 해당 테스크의 하위 테스크도 모두 취소된다.
all([...effects]): 여러 사가를 동시에 실행하고, 모든 사가가 완료될 때까지 기다린다. 병렬 실행이 필요할 때 유용하다.
이러한 기능들을 통해 Redux-saga는 애플리케이션의 사이드 이펙트를 효율적으로 관리할 수 있으며, 복잡한 비동기 흐름을 간결하고 이해하기 쉽게 만들어 준다.