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

안녕하세요 제로초님 강의정말 잘듣고있습니다. 강의를 들으면서 제 개인프로젝트에 개념을 대입하고있는데

제로초님과 다른 antd 로그인폼을 사용해서인지 모르겠지만 LOG_IN_SUCCESS action을 수행하고 me에 action data가 저장이 안되서인지 nickname이 화면에 출력되지 않더라고요

로그인, 로그아웃 action은 전부 정상적으로 작동하는데 위의 문제만 해결되지 않아서 구글링하고 혼자서 고민해봐도 아무리 답을 찾기 힘들어서 이렇게 질문드립니다 ㅜㅜ

우선 로그인을 한뒤 아래와 같은 객체가 출력됬습니다.

// ant design 로그인폼

import React, { useCallback } from 'react';
import { Form, Input, Button, Row } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import Link from 'next/link';

import { FormWrapper, LoginBtn } from './styles';
import { loginRequestAction } from '../../reducers/user';

const LoginForm = () => {
  const dispatch = useDispatch();
  const { isLoggingIn } = useSelector((state) => state.user);
  const onSubmitForm = useCallback((value) => {
    console.log(value);    
    dispatch(loginRequestAction(value));    
  }, []);

  return (    
    <FormWrapper onFinish={onSubmitForm} name="loginForm" size='large'>
      <Form.Item               
        name="id"
        rules={[
          {
            type: 'text',
          },
          {
            required: true,
            message: '아이디를 입력하세요.',
          }
        ]}
      >
            
        <Input placeholder='Enter your Id'/>
      </Form.Item>

      <Form.Item
        name="password"
        rules={[
          {
            required: true,
            message: '비밀번호를 입력하세요.',
          }
        ]}
      >                
        <Input.Password placeholder='Enter your Password' />
      </Form.Item>
      
      <Row align='end'>
        <LoginBtn type='primary' htmlType='submit' loading={isLoggingIn}>로그인</LoginBtn>
        <Link href='/signup'><a><Button type='primary'>회원가입</Button></a></Link>
      </Row>
    </FormWrapper>    
  )
};

export default LoginForm;

그리고 아래는 질문에 참고할 수 있는 추가 코드입니다

// sagas/user.js파일
import { all, fork, delay, put, takeLatest } from 'redux-saga/effects';

// function logInAPI(data) {
//   return axios.post('/api/login', data);
// }

function* logIn(action) {
  try {    
    // const result = yield call(logInAPI, action.data);    
    yield delay(1000);
    yield put({
      type: 'LOG_IN_SUCCESS',       
      data: action.data,
    })
  } catch(err) {
    yield put({
      type: 'LOG_IN_FAILURE',
      data: err.response.data
    })
  }  
}

// function logOutAPI() {
//   return axios.post('/api/logout');
// }

function* logOut() {
  try {  
    // const result = yield call(logOutAPI);
    yield delay(1000);
    yield put({
      type: 'LOG_OUT_SUCCESS',      
    })
  } catch(err) {
    yield put({ 
      type: 'LOG_OUT_FAILURE',
      data: err.response.data
    })
  }  
}

function* watchLogIn() {   
  yield takeLatest('LOG_IN_REQUEST', logIn);
}

function* watchLogOut() {  
  yield takeLatest('LOG_OUT_REQUEST', logOut);
}

export default function* userSaga() {
  yield all([
    fork(watchLogIn),
    fork(watchLogOut),
  ]);
}

// reducers/user.js파일

export const initialState = {
  isLoggingIn: false,
  isLoggingOut: false,
  isLoggedIn: false,
  me: null,
  signUpData: {},
  loginData: {},
};

export const loginRequestAction = (data) => {
  return {
    type: 'LOG_IN_REQUEST',
    data
  }
};

export const logoutRequestAction = () => {  
  return {
    type: 'LOG_OUT_REQUEST',
  }
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'LOG_IN_REQUEST':
      console.log(action);
      return {        
        ...state,
        isLoggingIn: true,
      };
    case 'LOG_IN_SUCCESS':
      return {        
        ...state,
        isLoggingIn: false,
        isLoggedIn: true,
        me: { ...action.data, nickname: 'Mirrer' },        
      };
    case 'LOG_IN_FAILURE':
      return {        
        ...state,
        isLoggingIn: false,
        isLoggedIn: false,
      };
    case 'LOG_OUT_REQUEST':
      return {        
        ...state,
        isLoggingOut: true,
      };
    case 'LOG_OUT_SUCCESS':
      return {        
        ...state,
        isLoggingOut: false,
        isLoggedIn: false,
        me: null,
      };
    case 'LOG_OUT_FAILURE':
      return {        
        ...state,
        isLoggingOut: false,
      };
    default:
      return state;
  }
};

export default reducer;

 

// me를 사용하는 컴포넌트 (해당 컴포넌트에서 nickname이 화면에 출력되지 않는 문제 발생)

import React, { useCallback } from 'react';
import { Badge, Menu } from 'antd';
import Link from 'next/link';
import { useDispatch, useSelector } from 'react-redux';
import { LoadingOutlined } from '@ant-design/icons';

import { logoutRequestAction } from '../../reducers/user';
import { 
  LoggedinMenu, MenuWrapper, HomeIcon, UserIcon, NewsIcon, 
  SpinIcon, LogoutIcon, UserMenu, AvatarWrapper, UserAvatar, UserName 
} from './styles';

const LoginMenu = () => {
  const dispatch = useDispatch();
  const { isLoggingOut, me } = useSelector((state) => state.user);
  const onLogout = useCallback((e) => {    
    console.log(e);
    dispatch(logoutRequestAction());
  }, []);

  return (
    <nav>
      <LoggedinMenu mode='horizontal'>
        <MenuWrapper>
          <Menu.Item key='home' icon={<HomeIcon />} ><Link href="/"><a>Home</a></Link></Menu.Item>                   
          <Menu.Item key='myPage' icon={<UserIcon />} ><Link href="/profile"><a>My Page</a></Link></Menu.Item>                  
          <Menu.SubMenu key='news' title='새소식' icon={<Badge dot><NewsIcon /></Badge>} >          
            <Menu.Item key="like-comment-alert1">
              <p>User1님이 작성글에 좋아요를 눌렀습니다.</p>            
            </Menu.Item>
            <Menu.Item key="like-comment-alert2">            
              <p>User2님이 작성글에 댓글을 등록했습니다.</p>
            </Menu.Item>
          </Menu.SubMenu>
          {
          isLoggingOut
          ? <Menu.Item><SpinIcon indicator={<LoadingOutlined />} /></Menu.Item>
          : <Menu.Item key='logout' icon={<LogoutIcon />} onClick={onLogout} >Logout</Menu.Item>
          }
        </MenuWrapper>        

        <UserMenu>
          <AvatarWrapper key='userAvatar' icon={<UserAvatar /> } ></AvatarWrapper>                
          <UserName key='user-name'>{me.nickname}</UserName>
        </UserMenu>
      </LoggedinMenu>                  
    </nav>    
  )
};

export default LoginMenu;