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

Question

다음은 제 전체 코드인데요, 어떤거를 만져줘야할까요?.. 참고로 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 > 로그아웃 했습니다. ) } { dummy . isLoggedIn && < PostForm /> } { dummy . mainPosts . map ( c => { return < PostCard key = { c } post = { c } /> ; }) } ); }; 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 );

제로초(조현영) · Answer

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

제로초(조현영) · Answer

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

반가우면반갑다고해 · Answer

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

반가우면반갑다고해 · Answer

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;