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

milo

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

리덕스 실제 구현하기

useSelector 사용시 undefined 문제

작성

1.4K

안녕하세요,

AppLayout.js 에서 

const isLoggedIn = useSelector((state) => state.user.isLoggedIn);

이부분 state의 user가 undefined가 뜹니다... 

어느부분을 더 확인해봐야 할까요?

TypeError: Cannot read property 'user' of undefined at C:\Users\oht36\react-projects\react-nodebird\prepare\front\.next\server\pages\index.js:152:101 at useSelectorWithStoreAndSubscription (C:\Users\oht36\react-projects\react-nodebird\prepare\front\node_modules\react-redux\lib\hooks\useSelector.js:39:30) at useSelector (C:\Users\oht36\react-projects\react-nodebird\prepare\front\node_modules\react-redux\lib\hooks\useSelector.js:139:25) at AppLayout (C:\Users\oht36\react-projects\react-nodebird\prepare\front\.next\server\pages\index.js:152:85) at processChild (C:\Users\oht36\react-projects\react-nodebird\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3353:14) at resolve (C:\Users\oht36\react-projects\react-nodebird\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3270:5) at ReactDOMServerRenderer.render (C:\Users\oht36\react-projects\react-nodebird\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3753:22) at ReactDOMServerRenderer.read (C:\Users\oht36\react-projects\react-nodebird\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29) at renderToString (C:\Users\oht36\react-projects\react-nodebird\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27) at Object.renderPage (C:\Users\oht36\react-projects\react-nodebird\prepare\front\node_modules\next\dist\next-server\server\render.js:50:851)

Next.js react nodejs redux express

퀴즈

리덕스의 주요 목적은 무엇인가요?

React 컴포넌트 라이프사이클 관리

서버와의 비동기 통신 최적화

애플리케이션 상태 중앙 집중 관리

UI 렌더링 성능 향상

답변 1

제로초(조현영)

지식공유자

저 에러는 user가 undefined가 아닙니다. state가 undefined입니다. 리덕스 설정 쪽 코드 확인해보셔야 합니다. state는 객체여야하는데 undefined인것은 리덕스 초깃값 세팅 오류거나 reducer에서 return을 빠뜨리신 듯 합니다.

Jinwoo Cheon

음.. 저도 같은 현상 겪어서 이렇게 해결했습니다.

default로 state를 return 해주니까 해결되네요..

왜그럴까요?

switch (action.type) {
    case 'LOG_IN':
      return {
        ...state,
        user: {
          ...state.user,
          isLoggedIn: true,
          user: action.data,
        }
      }
    case 'LOG_OUT':
      return {
        ...state,
        user: {
          ...state.user,
          isLoggedIn: false,
          user: null,
        }
      }
    default:
      return{
        ...state,
      }
  }

제로초(조현영)

지식공유자

state를 return 안하면 undefined를 return하게됩니다.

milo

작성한 질문수

전체 Q&A

질문하기