리액트, 리덕스, 사가 요약

React

• 상태에 따른 View를 출력하기 위해 사용

React-Redux

• 상태를 변경하기 위해 사용
• 액션: 변경을 트리거링
• 리듀서: 변경을 수행
  하나의 액션은 하나의 리듀서와 연결된다.

Redux-thunk 와 Redux-saga의 공통점

• 외부 상태에 따른 상태변경을 하기위해 사용
• 비동기 로직을 redux와 분리한다.
• action을 가로채서 비동기를 수행, 결과에 따른 action을 반환해 reducer를 실행하는 미들웨어

Redux-thunk

• 로직을 가진, 함수로서의 액션을 만들어 사용하는 방식
  비동기 작업을 하는 Action을 만들고 그 안에 변경 작업을 하는 dispatch를 포함한 형식
• 이렇게 만든 액션을 dispatch하여 사용한다.
• 익숙한 문법형태
• 모호한 측면이 있음
  일반적인 액션 외에도, 함수를 반환하기도 하는 등 반환형태가 일관되지 않다

Redux-saga

• 제너레이터 문법의 액션을 만든다.
• dispatch되는 액션을 감지하는 리스너 형태로 동작
• 익숙하지 않은 문법형태
• 제너레이터에 saga의 함수를 이용하는 방식
• 일관된 액션 리턴형태
• takeLatest 같이 특화된 기능이 있다

Redux-toolkit과 saga의 연동

• reducer에 saga가 감지할 리듀서를 만든다. 그러면 동일한 이름의 action이 생긴다.
• saga는 해당 action과, saga 로직을 묶는다. 예제 링크

추후 예제 추가 예정

참고:

• https://min9nim.vervel.app/2020-04-23-redux-saga
• https://medium.com/humanscape-tech/redux와-미들웨어-thunk-saga-43bb012503e4
• https://im-developer.tistory.com/195

예제는 이분이 가장 잘 정리되어있다.
https://velog.io/@vvvvwvvvv/