주로 redux saga에 대한 이야기 입니다. Thunk는 비교군으로 나오는 문서 입니다. Redux사가에 대한 간단한 설명 및 예제가 포함되어 있습니다.

Thunk VS Saga

thunk와 saga의 공통점은, asynchronous하게 flow가 일어나는 경우를 처리할 수 있게 도와준다이고,

thunk

• 장점은? → 매우 간단하다!
• 단점은? → 초보가 작업을 하게 되면 Action creator에서 콜백 hell에 빠질 수 있다
  • unit test시에 불편함이 있다. 연결이 다 되어 있다보니, 잘라서 테스트가 쉽지 않다.
  • saga에서 제공해주는 것들이 없다 (단점이 아닐 수도 있지만, saga의 편의성이 있기때문에 적어보았습니다)

saga

• 장점은? → Action이 매우 깔끔하게 디자인할 수 있습니다. (정말 크죠) && 테스트에 매우 용이 합니다.
  • https://redux-saga.js.org/docs/advanced/Testing/
• 단점은? → 처음에 셋업할게 좀 있으며, generator등의 새로운 개념도 숙지 하셔야 합니다. (공부할게 추가!) → 하지만, 한 번 셋업을 해두면, 어렵지 않습니다.

유닛테스트를 많이 안하시는 분이고 빠르게 간단한 서비스를 런칭을 한다면 thunk가 나쁘지 않습니다. 하지만 서비스가 진지해져야 한다면 (진지 = 복잡) saga를 시도 하시는 것을 추천 합니다.

Thunk나 Saga를 미들 웨어라고 하는데, middleware는 뭘까요?

What is Redux Middleware?

보통 미들웨어는 원래 기본 구조에서 추가 extension을 통해, 원래 할 수 없었던 일들을 추가적으로 할 수 있게 해주는 layer 혹은 stage라고 생각하시면 됩니다. Redux Middleware는 action과 리듀서에 들어가는 그 순간까지를 담당 해주는 친구죠. 주로 asnchronous API, 혹은 테스트, 에러 크레시 레포트등을 이곳에서 담당합니다.

Thunk

바로 한 번 코드를 볼까요?