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

반가우면반갑다고해

작성한 질문수

React로 NodeBird SNS 만들기

3-7. react-redux connect

user.nickname이 동작하지 않습니다.

작성

·

150

0

다음은 제 전체 코드인데요, 어떤거를 만져줘야할까요?..

참고로 console.log(user);하면 객체형태로 state가 잘 출력되나 console.log(user.nickname);하면 언디파인이 나오네요..

import React, { useEffect } from "react";
import PostForm from "../components/PostForm";
import PostCard from "../components/PostCard";
import { connect } from "react-redux"; // 7.1.1 이상부터 사용가능 훅 사용하기위함임..
import { loginAction, logoutAction } from "../reducers/user";

// index.js는 타임라인 역할

const dummy = {
  isLoggedIn: true,
  imagePaths: [],
  mainPosts: [
    {
      User: {
        id: 1,
        nickname: "정중식"
      },
      content: "첫 번째 게시글",
      img: "https://img.hankyung.com/photo/201807/03.17342954.1.jpg"
    }
  ]
};

const Home = ({ user, dispatch, login, logout }) => {
  useEffect(() => {
    login();
    logout();
    login();
    console.log(user.nickname);
  }, []);

  return (
    <div>
      {user ? (
        <div>로그인 했습니다:{user.nickname}</div>
      ) : (
        <div>로그아웃 했습니다.</div>
      )}
      {dummy.isLoggedIn && <PostForm />}
      {dummy.mainPosts.map(c => {
        return <PostCard key={c} post={c} />;
      })}
    </div>
  );
};

function mapStateToProps(state) {
  return {
    user: state.user
  };
} // 리덕스 state를 리액트state로 맵핑시켜주겠다. 리덕스 state인 user가 const Home({user}) 리액트 props인 user로 연결이 됨

function mapDispatchToProps(dispatch) {
  return {
    login: () => dispatch(loginAction),
    logout: () => dispatch(logoutAction)
  };
} // 액션 자체를 dispatch해서 리턴해줌

export default connect(mapStateToProps, mapDispatchToProps)(Home);

react javascript

답변 4

1

제로초(조현영)

지식공유자

Home의 user ? 부분에서 user는 {}라서 항상 true입니다. 리듀서부분에셔 기본값을 {}이 아니라 null로 바꾸세요.

1

제로초(조현영)

지식공유자

users reducer에서 LOG_IN 부분을 어떻게 구현하셨나요?

0

반가우면반갑다고해

질문자

답변 감사합니다.
다음에 질문하게되면 번거롭지않게 깃허브 주소도 같이 올릴게요! 사랑합니당.

0

반가우면반갑다고해

질문자

export const initialState = {
  isLoggedIn: false,
  user: {}
};

export const LOG_IN = "LOG_IN"; // 액션의 이름
export const LOG_OUT = "LOG_OUT";

export const loginAction = {
  type: LOG_IN,
  data: {
    nickname: "정중식"
  }
};

export const logoutAction = {
  type: LOG_OUT
};

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

export default reducer;

이렇게 구현했습니다.

반가우면반갑다고해

작성한 질문수