프론트엔드
react + typescript에 redux-saga 셋팅하기
두줄요약
React와 TypeScript 환경에서 Redux 모듈을 분리하고 typesafe-actions로 타입 안전성을 구성했습니다. Redux-Saga 미들웨어로 API 비동기 처리와 중복 요청 취소 흐름을 구현했습니다.
구조와 흐름
- CRA TypeScript 프로젝트에 Redux, React-Redux, Redux-Saga, typesafe-actions 구성
- Redux 모듈을 actions, types, reducer, saga, index 파일로 분리
- rootReducer와 rootSaga 결합 후 Saga 미들웨어를 스토어에 등록
해결 방법
- typesafe-actions의 createAction·createReducer로 액션과 상태 타입 연결
- createAsyncAction으로 요청·성공·실패 비동기 액션 묶음 구성
- Saga의 call·put·takeLatest로 API 호출, 결과 디스패치, 중복 요청 취소 처리
주의할 점
- Saga 동작 이해를 위한 JavaScript 제너레이터 함수 선행 지식
- takeEvery, takeLatest, takeLeading의 액션 수신·취소·차단 특성 구분
- Redux-Saga 외 Redux-Observable·MobX·Observable 등 프로젝트 특성에 따른 선택 필요
적용해볼 점
- useSelector에 RootState를 적용한 스토어 상태 타입 추론
- useDispatch로 비동기 요청 액션 디스패치
