react-redux 사용시 redux-thunk 의 중요성

현상

신규 개인프로젝트 중 react-redux 의 useDispatch 을 이용한 함수 호출 도중
비동기 처리 관련 오류가 발생함

에러내용

Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.
...

원인

CRA을 이용한 신규프로젝트 작업 중
redux를 사용하여 action을 dispatch 할 시 비동기 처리 작업을 처리하는 미들웨어 부분이 누락되었음.
redux-thunk

해결

redux 개발 환경 세팅에서 applyMiddleware()에 redux-thunk 를 포함함

import { createStore, applyMiddleware } from 'redux';
const store = createStore(rootReducer, applyMiddleware(thunk));

마무리

신규프로젝트를 작업하면서 무작정 기존 프로젝트를 copy & paste 를 안하려고 하다보니
redux-thunk 관련 누락된 부분이 있었다.
분명 React 책에서도 봤었던 내용인데 무슨 생각으로 빼고 했는지 부끄럽다...

앞으로는 webpack, redux 등 기본 개발 환경 세팅을 커스컴하게 다룰 수 있게 연습 해야겠다.