react + typescript에 redux-saga 셋팅하기
1
AI 요약
이 글은 AI가 원문을 분석하여 핵심 내용을 요약한 것입니다.
React + Typescript에 Redux-Saga 셋팅하기
이 게시물은 React 프로젝트에 Typescript와 Redux-Saga를 통합하는 방법을 단계별로 설명합니다.주요 구성 요소 설치 및 설정
- Create React App에 Typescript 템플릿 적용
- redux, react-redux, redux-saga, typesafe-actions 설치
- 모듈별로 actions, reducer, saga, types 파일 분리하여 관리
Redux-Saga 비동기 처리
- 비동기 액션을 typesafe-actions의 createAsyncAction으로 정의
- 제너레이터 함수 형태의 saga에서 call, put, takeLatest 등의 이펙트 사용
- API 호출과 성공, 실패 처리 로직 구현
스토어 및 미들웨어 설정
- rootReducer와 rootSaga 통합
- configureStore에서 sagaMiddleware 적용 및 redux-devtools 연동
컴포넌트에서의 사용
- useSelector로 상태 조회, useDispatch로 액션 디스패치