인프런 커뮤니티 질문&답변

이전에는 잘됬었는데 ant-design의 Menu레이아웃을 변경한 뒤로부터 로그아웃 액션이 실행되지 않아서 질문드립니다.

 

콘솔을 확인해보니 기존의 key값이 undefined로 나와서 전달이 안되는것같은데 어떤 방법으로 해결할 수 있는지 궁금합니다.

 

import React, { useCallback } from 'react';
import { Menu } from 'antd';
import { UserOutlined, HomeOutlined, LogoutOutlined, DownOutlined } from '@ant-design/icons';
import Link from 'next/link';
import { useDispatch } from 'react-redux';

import { logoutAction } from '../reducers/user';

const LoggedinHeader = () => {
  const dispatch = useDispatch();
  const onLogout = useCallback((e) => {    
    console.log(e);
    if (e.key === 'logout') {
      dispatch(logoutAction());
    }
  }, []);

  return (    
    <MenuWrapper mode='horizontal' onClick={onLogout}>
      <MainMenuWrapper>
        <Menu.Item key='home' icon={<HomeIconWrapper />} ><Link href="/"><a>Home</a></Link></Menu.Item>                   
        <Menu.Item key='myPage' icon={<UserIconWrapper />} ><Link href="/mypage"><a>My Page</a></Link></Menu.Item>                  
        <Menu.Item key='logout' icon={<LogoutIconWrapper />} >Logout</Menu.Item>        
      </MainMenuWrapper>        

      <UserMenuWrapper>
        <UserNameWrapper key='user-name'>User Name</UserNameWrapper>        
        <Menu.SubMenu key="news" icon={<DownOutlined />}>
          <Menu.Item key="like-comment-alert">
            좋아요 알람, 댓글 알람
          </Menu.Item>
        </Menu.SubMenu>        
      </UserMenuWrapper>
    </MenuWrapper>                  
  )
};

export default LoggedinHeader;

 

export const initialState = {
  isLoggedIn: false,
  user: null,
  signUpData: {},
  loginData: {},
};

export const loginAction = (data) => {
  return {
    type: 'LOG_IN',
    data
  }
};

export const logoutAction = () => {
  return {
    type: 'LOG_OUT',    
  }
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'LOG_IN':
      return {        
        ...state,
        isLoggedIn: true,
        user: action.data,
      };
    case 'LOG_OUT':
      return {        
        ...state,
        isLoggedIn: false,
        user: null,
      };
    default:
      return state;
  }
};

export default reducer;