Front-end

Redux-saga

춘_춘 2024. 1. 1. 17:03

Redux는 비동기 동작들이 제어하기 어려운데, 비동기 동작을 더 쉽게 만드는 것이 Redux Saga라고 볼 수 있다.

Redux


Redux에서는 acation을 발생시키면 reducer을 통해 state를 변화시켜 store를 갱신했다.

Redux-saga


Redux-saga는 action과 reducer사이에서 흐름을 제어하는 미들웨어다. action이 발생하면, reducer가 액션을 처리하기 전에 다양한 작업을 할 수 있다.

 

Redux-saga의 장점


  • 기존 요청을 취소 처리하거나 불필요한 중복 요청을 방지할 수 있다.
  • 비동기 작업을 처리하는데 효과적이다.
  • 특정 액션이 발생했을 때, 다른 액션을 발생시키거나, 리덕스와 관계없는 코드 실행 시 사용한다.

즉, 간편하면서도 깊게 state의 흐름을 제어할 수 있다.

 

Redux-saga의 단점


  • 생소한 generator 함수(ES6의 generator & yield)
  • ES7 async / await 가 등장
  • tyepscript의 지원이 미흡하다.
  • 가장 최근 릴리즈가 2019년이다.

 

우리가 서버에서 받아오는 데이터를 무조건 redux에 저장할 필요가 없고, isLoading나 error나 데이터 캐싱 등 서버 상태를 다루기 위해 매번 서버 상태와 관련된 프로퍼티를 redux store에 추가하던 비용을 생각하면 서버 상태 관리는 클라이언트 전역 상태 관리와 분리할 필요가 있다고 본다.
사실 서버 상태를 분리하고 나면 redux를 사용할 일이 매우 줄어들 것이다. zustand, recoil이나 jotai같이 context api 처럼 사용할 수 있는 가벼운 전역 상태 관리 라이브러리 도입이 더 맞을 수도 있다.

 

참고

- https://yrnana.dev/post/2021-08-29-redux-saga/

- https://leego.tistory.com/entry/Redux-saga%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90