
다음은 제 전체 코드인데요, 어떤거를 만져줘야할까요?..
참고로 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);