React - Uncaught TypeError: XX is not a function
에러 (Error)
XX.js:19 Uncaught TypeError: XX is not a function
상황 (Situation)
redux 를 사용해서 개발 중에 function 을 찾을 수 없다는 에러가 발생했다. UI 에 필요한 component 들부터 개발한 후, BE의 API 응답을 받아 status 로 관리하기 위해 redux를 사용면서 코드 일부를 수정하는 과정에서 위와 같은 문제가 발생하였다. 문제되는 function (getUserInfo) 은 console 에서 undefined 로 찍히고 있었고, 에러가 발생하고 있던 코드는 아래와 같다.
Dashboard.js
import React, {useState, useEffect} from 'react';
import { bindActionCreators } from 'redux'
import { connect, useSelector } from 'react-redux'
import { getUserInfo as getUserInfoAction } from "../modules/account";
export const Dashboard = ({fetchUserInfo}) => {
useEffect(() => {
console.log(fetchUserInfo); <-- undefined 로 출력 확인
fetchUserInfo(token);
},[]);
..
}
..
const mapDispatchToProps = (dispatch) => ({
fetchUserInfo: bindActionCreators(getUserInfoAction, dispatch),
});
export default connect(
mapStateToProps,
mapDispatchToProps,
)(Dashboard);
MyPage.js
import { Dashboard } from "../container/Dashboard";
원인 (Cause)
redux를 적용하기 전의 기존 코드에서는 Dashboad.js 에서는 "export const Dashboard" 로 export 를 한 후, MyPage.js 에서는 "import { Dashboard }" 로 improt 를 하고 있었다. 그런데, redux 를 적용하면서 Dashboard.js 에 "export default connect()" 코드가 추가되면서 default 로 export 를 하도록 바뀌었으나, MyPage.js 에서는 이를 고려하지 않았기 때문에 발생하였다.
해결 (Solution)
default 로 export 한 component 는 괄호("{}", brackets) 없이 import 를 해서 사용해야하므로, 아래와 같이 MyPage.js 에서 import 할 때 괄호를 제거함으로써 에러 상황이 더이상 발생되지 않았다.
MyPage.js
import Dashboard from "../container/Dashboard";
참고
stackoverflow : mapDispatchToProps not working. Props empty (error: redux action is not a function) link
