loginAction 에 대해 질문드립니다
271
작성한 질문수 2
제로초님의 강의 잘 보고 많이 배우고 있습니다!!
이 영상을 보고 배운 코드를 바탕으로 연습을 하고있는데,
loginAction이 실행이 안되는 것 같습니다.. 따로 에러메시지도 뜨지 않아서 계속 해결이 안되어 질문드립니다..
isLoggedIn이 false에서 submit하여도 true로 바뀌지를 않습니당..
reducers/index.js
// 서버사이드렌더링을 위함
import { HYDRATE } from "next-redux-wrapper";
// 리듀서 합쳐주는 메서드
import { combineReducers } from "redux";
import user from "./user";
import post from "./post";
// (이전상태,액션) => 다음상태
const rootReducer = combineReducers({
index: (state = {}, action) => {
switch (action.type) {
case HYDRATE:
console.log("HYDRATE", action);
return {
...state,
...action.payload,
};
default:
return state;
}
},
user,
post,
});
export default rootReducer;
reducers/user.js
const dummyUser = {
id: 1,
nickname: "제로초",
Posts: [],
Followings: [],
Followers: [],
};
export const initialState = {
isLoggedIn: false,
user: null,
signUpData: {},
loginData: {},
};
export const SIGN_UP = "SIGN_UP";
export const SIGN_UP_SUCCESS = "SIGN_UP_SUCCESS";
export const LOG_IN = "LOG_IN"; // 액션의 이름
export const LOG_IN_SUCCESS = "LOG_IN_SUCCESS"; // 액션의 이름
export const LOG_IN_FAILURE = "LOG_IN_FAILURE"; // 액션의 이름
export const LOG_OUT = "LOG_OUT";
export const signUpAction = (data) => {
return {
type: SIGN_UP,
data,
};
};
export const signUpSuccess = {
type: SIGN_UP_SUCCESS,
};
export const loginAction = (data) => {
return {
type: LOG_IN,
data,
};
};
export const logoutAction = {
type: LOG_OUT,
};
export const signUp = (data) => {
return {
type: SIGN_UP,
data,
};
};
export default (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,
};
}
}
};
pages/_app.js
import Head from "next/head";
import "../styles/global.css";
import wrapper from "../store/configureStore";
function App({ Component }) {
return <Component />;
}
export default wrapper.withRedux(App);
pages/login.js 여기 아랫부분의 필요없는 것 같은 코드는 생략했습니다..!
import { useCallback } from "react";
import useInput from "../hooks/useInput";
import { useDispatch, useSelector } from "react-redux";
import { loginAction } from "../reducers/user";
function Login() {
const [email, onChangeEmail] = useInput("");
const [password, onChangePassword] = useInput("");
const dispatch = useDispatch();
const onSubmitForm = useCallback(() => {
console.log(email, password);
dispatch(
loginAction({
email,
password,
})
);
}, [email, password]);
return (
<>
<div className={style.loginHead}>
<Link href="/">
<a>
<span>
<ImArrowLeft2 size="25" color="gray" />
</span>
</a>
</Link>
<img src={`/`} alt="" />
<span>로그인</span>
</div>
<div className={style.inputLogin}>
<form
action="/"
encType="multipart/form-data"
method="post"
onSubmit={onSubmitForm}
>
<h1>로그인</h1>
<label htmlFor="user-email">이메일</label> <br />
<input
type="email"
name="user-email"
value={email}
onChange={onChangeEmail}
reqired
/>
<br />
<label htmlFor="user-password">비밀번호</label>
<br />
<input
name="user-password"
type="password"
value={password}
onChange={onChangePassword}
reqired
/>
<br />
<button type="submit">로그인</button>
</form>
</div>
답변 1
넥스트 버젼 질문
0
90
2
로그인시 401 Unauthorized 오류가 뜹니다
0
104
1
무한 스크롤 중 스크롤 튐 현상
0
198
1
특정 페이지 접근을 막고 싶을 때
0
117
2
createGlobalStyle의 위치와 영향범위
0
103
2
인라인 스타일 리렌더링 관련
0
98
2
vsc 에서 npm init 설치시 오류
0
159
2
nextjs 15버전 사용 가능할까요?
0
166
1
화면 새로고침 문의
0
129
1
RTK에서 draft, state 차이가 있나요?
0
164
2
Next 14 사용해도 될까요?
0
455
1
next, node 버전 / 폴더 구조 질문 드립니다.
0
359
1
url 오류 질문있습니다
0
218
1
ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out
0
391
1
sudo certbot --nginx 에러
0
1295
2
Minified React error 콘솔에러 (hydrate)
0
481
1
카카오 공유했을 때 이전에 작성했던 글이 나오는 버그
0
257
1
프론트서버 배포 후 EADDRINUSE에러 발생
0
341
1
npm run build 에러
0
526
1
front 서버 npm run build 중에 발생한 에러들
0
399
1
서버 실행하고 브라우저로 들어갔을때 404에러
0
351
2
css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.
0
291
1
팔로워 3명씩 불러오고 데이터 합쳐주는걸로 바꾸고 서버요청을 무한으로하고있습니다.
0
251
2
해시태그 검색에서 throttle에 관해 질문있습니다.
0
207
1





