리덕스 개념을 이해하기 위해 잠깐동안 공부하며
환경 구성이 왜 이렇게 복잡해? 시간여행은 또 뭐야...? 싶은 생각이 들었다
이 혼란스러움을 노션에 정리했었는데 벨로그에도 포스팅해봄

먼저, 환경 구성이 왜 복잡하다고 생각했냐면
보일러플레이트를 쓸데없이 많이 요구한고 느꼈기 때문이다
게다가 리덕스 사용을 도와주는 패키지가 한두개가 아님...

🤔 위 이슈를 해결하기 위해 RTK(툴킷)이 나왔는데
이것으로 인한 러닝커브와 번들 사이즈 증가는..? 나중에 생각하자ㅎ

RTK; 리덕스를 위한 도구 모음

---

• RTK는 기존 리덕스의 문제를 개선하고, 리덕스 로직을 작성하는 표준을 제안
• TypeScript 사용자를 위해 Type Definition을 공식 지원(action type, state type)

⚙️ RTK가 지원하는 기능

1. redux-action
2. reselect
3. immer의 produce
4. redux-thunk
5. Flux Standard Action 강제화
6. Type Definition

시간여행은 뭐죠?

---

⏱ 시간여행 디버깅; Time Travel Debugging

• 시간 여행 디버깅 이란 이름에서 추측이 가능하듯이 이전의 특정 상태로 돌아갈 수 있게 해주는 것
• 상태가 새로 바뀔 때마다 상태 객체의 모든 버전을 기록

시간여행 디버깅의 장점

• 이전 버전으로 언제든지 돌아갈 수 있다
• 문제 파악이 용이하다

어떻게?

1. chrome 웹스토어에서 Redux DevTools를 설치

2. reducer를 생성하는 createStore내에 아래의 코드를 한 줄 추가

   var store = Redux.createStore(
   		reducer,
   		// 아래 코드를 추가
   		window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
   );

3. 크롬 개발자 도구 > Redux > 리로드

📑 참고한 레퍼런스

---

• Redux Toolkit (리덕스 툴킷)은 정말 천덕꾸러기일까?
• redux-toolkit을 사용하여 간단하게 상태 관리하기