Joker

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