Redux-Saga 개념

Until Redux-Saga

• Redux에서 비동기 처리를 어떻게 하나?
• middleware를 통해서 적용 가능
  
• 미들웨어는 고차함수의 일종
• 대표적인 미들웨어가 redux-thunk
• redux-thunk는 복잡한 비동기적 처리를 할 경우 디버깅, 테스트가 어려워 진다.
• 액션 크리에이터가 액션이 아닌 함수를 반환한다.

Redux-Saga

• generator and saga라는 모델
• 관리하기 쉽고, 테스트하기 쉽고, 적당한 패턴으로 서비스로직을 쉽게 만들 수 있다.
• Action Creator의 반환은 Action-object
  

Concepts

Side Effect

• 사이드 이팩트는 비동기 요청, 브라우저 캐시, 로컬 스토리지 등을 뜻한다
• 부작용이라기 보다는 부수효과
• 코드가 외부세계에 영향을 주거나 받는 것을 의미한다. (부작용: negative side effect)

Generator

• saga는 generator를 적극적으로 사용한다.

// callee
function* myGeneratorFunction() {
  yield: 1;
  yield: 2;
  yield: 3;
}

// runner
const generator = myGeneratorFunction();
console.log(generator.next().value); // 1
console.log(generator.next().value); // 2
console.log(generator.next().value); // 3

saga

• 사이드이팩트를 관리하기 위한 로직
• App thread 역할을 한다
• saga는 제너레이터와 같은 형식으로 동작

example

effects

• 미들웨어에 수행되는 명령을 담고 있는 평범한 객체
• saga는 effect를 yield하고, middleware는 effect를 처리한다.

Effect를 yield하면, 미들웨어에서 처리가 끝날 때까지 기다려야할까? Nope (Blcoking, Non-Blocking Effect)

• call -> blocking
• fork -> non-blocking

출처

https://www.youtube.com/watch?v=UxpREAHZ7Ck&t=50s