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

이 강의 뒤를 봐야 에러가 안나는 건지는 모르겠는데 현재 length의 앞부분이 정의 되어 있지 않다는 아래와 같은 에러가 납니다.

TypeError: Cannot read property 'length' of undefined

에러가 나는 곳은 UserProfile.js 부분의

<Card
      actions={[
        <div key="twit">짹짹<br />{me.Posts.length}</div>,
        <div key="following">팔로잉<br />{me.Followings.length}</div>,
        <div key="follower">팔로워<br />{me.Followers.length}</div>,
      ]}
    >

이 부분인데요. me 부분을 보기위해서 리듀서의 user.js로 가면 아래와 같습니다...

export const initialState = {
  logInLoading: false, // 로그인 시도중
  logInDone: false,
  logInError: null,
  logOutLoading: false, // 로그아웃 시도중
  logOutDone: false,
  logOutError: null,
  signUpLoading: false, // 회원가입 시도중
  signUpDone: false,
  signUpError: null,
  me: null,
  signUpData: {},
  loginData: {},
}

export const LOG_IN_REQUEST = 'LOG_IN_REQUEST';
export const LOG_IN_SUCCESS = 'LOG_IN_SUCCESS';
export const LOG_IN_FAILURE = 'LOG_IN_FAILURE';

export const LOG_OUT_REQUEST = 'LOG_OUT_REQUEST';
export const LOG_OUT_SUCCESS = 'LOG_OUT_SUCCESS';
export const LOG_OUT_FAILURE = 'LOG_OUT_FAILURE';

export const SIGN_UP_REQUEST = 'SIGN_UP_REQUEST';
export const SIGN_UP_SUCCESS = 'SIGN_UP_SUCCESS';
export const SIGN_UP_FAILURE = 'SIGN_UP_FAILURE';

export const FOLLOW_REQUEST = 'FOLLOW_REQUEST';
export const FOLLOW_SUCCESS = 'FOLLOW_SUCCESS';
export const FOLLOW_FAILURE = 'FOLLOW_FAILURE';

export const UNFOLLOW_REQUEST = 'UNFOLLOW_REQUEST';
export const UNFOLLOW_SUCCESS = 'UNFOLLOW_SUCCESS';
export const UNFOLLOW_FAILURE = 'UNFOLLOW_FAILURE';

const dummyUser = (data) => ({
  ...data,
  nickname: 'harry',
  id: 1,
  posts: [],
  Followings: [],
  Followers: [],
});

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

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

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case LOG_IN_REQUEST:
      console.log('reducer logIn')
      return {
        ...state,
        logInLoading: true,
        logInError: null,
        logInDone: false,
      };
    case LOG_IN_SUCCESS:
      return {
        ...state,
        logInLoading: false,
        logInDone: true,
        me: dummyUser(action.data),
      };
    case LOG_IN_FAILURE:
      return {
        ...state,
        logInLoading: false,
        logInError: action.error,
      };
    case LOG_OUT_REQUEST:
      return {
        logOutLoading : true,
        logOutError : null,
        logOutDone : false,
      }
      
    case LOG_OUT_SUCCESS:
      return {
        logOutLoading : false,
        logOutDone : true,
        me : null,
      }  
    case LOG_OUT_FAILURE:
      return {
        logOutLoading : false,
        logOutError : action.error,
      }
    case SIGN_UP_REQUEST:
      return {
        signUpLoading : true,
        signUpError : null,
        signUpDone : false,
      }
      
    case SIGN_UP_SUCCESS:
      return {
        signUpLoading : false,
        signUpDone : true,
      }  
    case SIGN_UP_FAILURE:
      return {
        signUpLoading : false,
        signUpError : action.error,
      }
    default:
      return state;
  }
};

export default reducer;

혹시 더미유저부분의 배열이 빈배열이기 때문인가 싶어서 그부분만 제로초님 깃허브 부분 복붙했는데 그래도 같은 에러가 발생합니다. 혹시몰라서 사가의 user.js도 넣겠습니다.

import axios from 'axios'
import { all, fork, put, delay, takeLatest } from 'redux-saga/effects';
import { 
  LOG_IN_REQUEST, LOG_IN_SUCCESS, LOG_IN_FAILURE, 
  LOG_OUT_REQUEST, LOG_OUT_SUCCESS, LOG_OUT_FAILURE,
  SIGN_UP_REQUEST, SIGN_UP_SUCCESS, SIGN_UP_FAILURE,
} from '../reducers/user'

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

function* logIn(action) {
  try {
    console.log('saga logIn')
    // const result = yield call(logInAPI, action.data)
    yield delay(1000);
    yield put({
      type: LOG_IN_SUCCESS,
      data: action.data,
    });
  } catch (err) {
    yield put({ // put은 디스패치
      type: LOG_IN_FAILURE,
      error: 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,
      // data: result.data
    });
  } catch (err) {
    yield put({ // put은 디스패치
      type: LOG_OUT_FAILURE,
      error: err.response.data,
    })
  }
}

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

function* signUp() {
  try {
    // const result = yield call(signUpAPI)
    yield delay(1000);
    yield put({
      type: SIGN_UP_SUCCESS,
      // data: result.data
    });
  } catch (err) {
    yield put({ // put은 디스패치
      type: SIGN_UP_FAILURE,
      error: err.response.data,
    })
  }
}

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

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

function* watchSignUp() {
  yield takeLatest(SIGN_UP_REQUEST, signUp);
}

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