inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

React로 NodeBird SNS 만들기

더미데이터를 갖고오지못하는것 같습니다...!

228

양진화

작성한 질문수 2

0

//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} 와 같은 부분들이 다 안불러와지는것 같아요ㅠㅠ 제로초님 깃헙도 살펴봤는데 뭐가 문제인지 안보이네요ㅠㅠㅠ

react javascript

답변 1

0

제로초(조현영)

로그인부분 코드를 봐야할 것 같습니다. 그리고 혹시 새로고침하셨나요? 지금 진도상에서 그 부분에 대한 대비가 없을 것입니다.

next 10 이상에서는 redux dev tool 구동이 안되나요?

0

272

1

세션 갱신 문의 건

0

484

7

배포 진행 후 Highlight updates components render 표시

0

445

1

똑같은 기능을 하는 테이블

0

448

4

관계형

0

312

2

프론트 서버를 이용하지 않는경우

1

299

3

인피니트 스크롤링 사용시 오류

0

278

0

계속 이런에러가 떠서 해결하기는 했는데 어떤 의미인지 모르겠습니다.

0

434

2

req.user가 언제 생성되나요??

0

330

2

Cannot read property 'id' of null 에러

0

333

1

리트윗한 게시글 불러오는 sequelize

0

252

1

result.data에서 images인 이유

0

281

2

takeLatest에 대한 질문입니다.

1

342

2

프론트에서 express를 사용하지 않을때 동적라우팅

0

501

6

getInitialProps가 클라이언트에서 수행되는 이유?

0

258

1

리로드하면 팔로우 언팔로우 값이 초기화 되는 문제입니다.

0

445

2

스타일드 컴포넌트와 className을 통한 스타일 적용의 차이에 대해 궁금합니다

0

585

2

할인 쿠폰 사용이 안되는되요 (848-f9af83f183e3)

0

365

1

nodejs mvc 패턴

0

976

4

사용하고 보니, 람다 구성이 궁금합니다!

0

266

1

제로초님

0

445

1

새로고침 로그인 풀림 문제.

0

247

1

안녕하세요. 강의 너무 감사합니다

0

157

1

제로초님

0

170

1