[해결 방법] TypeError: _store_ui_slice__WEBPACK_IMPORTED_MODULE_1__.default.toggle is not a function

⚛️ 기본 환경: IDE: VS code, Language: React

 

 

발생 Error

React에서 다음 Source Code를 실행할 경우,

import classes from './CartButton.module.css';
 
import uiActions from '../../store/ui-slice'
import { useDispatch } from 'react-redux';
 
const CartButton = (props) => {
  const dispatch = useDispatch();
  
  const toggleCartHandler = () => {
    dispatch(uiActions.toggle());
  };
  
  return (
    <button className={classes.button} onClick={toggleCartHandler}>
      <span>My Cart</span>
      <span className={classes.badge}>1</span>
    </button>
  );
};
 
export default CartButton;
 

🚨 toggleCartHandler가 onClick 메서드로 걸린 버튼 클릭 시, 다음과 같은 오류 발생

TypeError: _store_ui_slice__WEBPACK_IMPORTED_MODULE_1__.default.toggle is not a function

 

 

발생 원인

import { createSlice } from "@reduxjs/toolkit";
 
const uiSlice = createSlice({
    name: 'ui',
    initialState: {cartIsVisible: false},
    reducers: {
        toggle(state){
            state.cartIsVisible = !state.cartIsVisible;
        }
    },
});
 
export const uiActions = uiSlice.actions;
 
export default uiSlice;
 

uiSlice를 default로 export, uiActions는 개별 함수로 export

default로 export하지 않은 uiActions를 {}없이 import

 

 

해결 방법

⭐ export default로 내보낸 것만 중괄호 없이 import
이 외export 문은 중괄호를 사용하여 import

import classes from './CartButton.module.css';
 
import {uiActions} from '../../store/ui-slice'
import { useDispatch } from 'react-redux';
 
const CartButton = (props) => {
  const dispatch = useDispatch();
  
  const toggleCartHandler = () => {
    dispatch(uiActions.toggle());
  };
  
  return (
    <button className={classes.button} onClick={toggleCartHandler}>
      <span>My Cart</span>
      <span className={classes.badge}>1</span>
    </button>
  );
};
 
export default CartButton;