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

//UserProfile.jsx
import React, { useCallback } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Card, Button, Avatar } from 'antd';
import { logoutAction } from '../reducers/user';

const UserProfile = () => {
  const { user } = useSelector(state => state.user);
  const dispatch = useDispatch();
  console.log(user);
  
  const onLogout = useCallback(() => {
    dispatch(logoutAction);
  }, []);

  return (
    <div>
      <Card
            actions= {[
              <div key='twit'> 짹짹 <br/> {user.Posts.length} </div>,
              <div key='twit'> 팔로잉 <br/> {user.Followings.length} </div>,
              <div key='twit'> 팔로워 <br/> {user.Followers.length} </div>,
            ]}          
          >
            <Card.Meta 
            avatar = {<Avatar>{user.nickname[0]}</Avatar>}
            title = {user.nickname}
            />
          </Card>
          <Button onClick={onLogout}>로그아웃</Button>
    </div>
  );
}

export default UserProfile;



//reducers/user.js
export const initialState = {
  isLoggedIn: false,
  user: null,
  signUpData: {},
  loginData: {},
};

const dummyUser = {
  nickname: '지나',
  Posts: [],
  Followings: [],
  Followers: [],
  isLoggedIn : true,
  signUpData : {},
}

const LOG_IN = 'LOG_IN'; //액션의 이름
const LOG_OUT = 'LOG_OUT'; 
const SIGN_UP = 'SIGN_UP'; 

//동적 데이터(값이 계속 바뀜) 경우 action을 함수로 만들어야
export const signUpAction = (data) => {
  return {
    type: SIGN_UP,
    data,
  }
}

export const loginAction = {
  type: LOG_IN,
}

export const logoutAction = {
  type: LOG_OUT,
}

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case LOG_IN: {
      return {
        ...state,
        isLoggedIn: true,
        user: dummyUser,
        loginData: action.data,
      }
    }
    case LOG_OUT: {
      return {
        ...state,
        isLoggedIn: false,
        user: null,
      }
    }
    case SIGN_UP: {
      return {
        ...state,
        signUpData: action.data,
      }
    }

    default: {
      return {
        ...state,
      }
    }
  }
}

export default reducer;

 

이렇게 되어있는데 console.log(user); 값이 null 로 뜹니다ㅠㅠ 그래서 뒤에 {user.Posts.length} 와 같은 부분들이 다 안불러와지는것 같아요ㅠㅠ 제로초님 깃헙도 살펴봤는데 뭐가 문제인지 안보이네요ㅠㅠㅠ