inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[리뉴얼] React로 NodeBird SNS 만들기

loginAction 에 대해 질문드립니다

271

박지연

작성한 질문수 2

0

제로초님의 강의 잘 보고 많이 배우고 있습니다!!

이 영상을 보고 배운 코드를 바탕으로 연습을 하고있는데,

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>

react redux nodejs express Next.js

답변 1

0

제로초(조현영)

redux-devtools에서는 액션이 기록되나요? console.log(email, password)한 것은 뜨나요?

0

박지연

넵! redux 툴에서는 LOG_IN 액션이 뜨고 잠깐이나마 true로 바뀌는 것 같습니다.

image컨솔로그에도 이메일과 비밀번호가 뜹니다.

리다이렉트되어서 빠르게 사라지긴하지만요...

0

제로초(조현영)

지금 보니까 e.preventDefault()를 안하셨네요. 폼에서는 이거 무조건 넣으셔야겠죠?

0

박지연

헉..감사합니다!! 해결됐어용

넥스트 버젼 질문

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