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

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

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

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>