소소한 코딩일지

Redux Toolkit (RTK)와 TypeScript를 활용하여 작성한 로직입니다. Redux Thunk Redux Store는 state의 변화에 따라 UI를 업데이트하기 위해서, 동기적으로 로직이 돌아간다. Redux Store에서 비동기적인 로직을 처리할 수 없기 때문에, Middleware를 추가하여 비동기적으로 처리되는 로직을 담당하게 한다. Redux Thunk는 Redux의 Middleware 중 하나로서, store와 상호작용하여 비동기적인 로직을 사용할 수 있다. 이번 프로젝트에서는 Redux Toolkit을 사용하기 때문에, configureStore 메서드 내부에 Redux Thunk가 기본적으로 세팅되어 있다. Create useSelector & useDispatch 우선 여러..

Redux toolkit과 Redux Thunk를 공부하면서 작은 프로젝트를 만들어보고 있었는데, Redux Thunk를 통해 api통신을 하는 과정에서 다음과 같은 에러 메시지를 만났다. 생소한 에러 로그이기도 하고, 현재 Redux Thunk를 공부하는 데 많이 애먹고 있어서 이번 에러 로그에 관한 정보와 해결 방안을 기록해두려고 한다. ## 상황 Redux Thunk를 통해 날씨 API와 GET 통신을 하기 위해서 코드라인을 작성했다. 데이터를 사용하는 쪽에서 console.log를 찍어보니 다음과 같은 에러로그가 나타났다. 에러 로그를 구글링해보니 공식문서의 리덕스 설계 규칙에서 관련 정보를 찾아볼 수 있었다. Non-Serializable 한 State나 Action을 사용하지 말 것. Prom..