프론트엔드
Typescript에서 Redux를 사용해보자
두줄요약
TypeScript React 환경에서 typesafe-actions와 immer로 Redux Todo 목록을 구현했습니다. 스토어 구성부터 액션·리듀서 타입화와 Hook 기반 상태 조회·변경까지 설명합니다.
구조와 흐름
- TypeScript 기반 React 프로젝트에
@types/react-redux,typesafe-actions설치 modules/todo아래 actions, reducer, types 파일 분리와 루트 reducer 결합createStore와Provider로 최상위 store 공유 구성
선택 이유
typesafe-actions의createStandardAction,ActionType활용을 통한 액션·페이로드 타입 정의createReducer기반 객체형 reducer 구성으로 switch/case 대체useSelector,useDispatch활용으로connect,mapStateToProps방식 간소화
해결 방법
- ADD_TODO·DELETE_TODO 액션과 Todo 상태 타입 정의
immer의produce로 Todo 추가·삭제 시 불변성 관리- Todo 입력 컴포넌트의 dispatch와 Todo 목록 컴포넌트의 store 조회·삭제 연결
적용해볼 점
- 여러 컴포넌트 간 공유 상태가 필요한 Todo 목록에 Redux store 적용
- 복잡한 상태 변경 시 전개 연산자 대신
produce활용 검토
