[React] BE 로그인/회원가입 구현(5) useDispatch

디렉토리, 파일 생성

src/_actions 디렉토리 생성
src/_actions/types.js 생성
src/_actions/user_action.js 생성

types.js

export const LOGIN_USER = "login_user";
export const REGISTER_USER = "register_user";
export const AUTH_USER = "auth_user";

user_actions.js

import axios from 'axios';
import {
    LOGIN_USER, REGISTER_USER, AUTH_USER
} from './types';
export function loginUser(dataToSubmit) {

    const request = axios.post('/api/users/login', dataToSubmit)
        .then(response => response.data)

    return {
        type: LOGIN_USER,
        payload: request
    }
}

export function registerUser(dataToSubmit) {

    const request = axios.post('/api/users/register', dataToSubmit)
        .then(response => response.data)

    return {
        type: REGISTER_USER,
        payload: request
    }
}

export function auth() {

    const request = axios.get('/api/users/auth')
        .then(response => response.data)

    return {
        type: AUTH_USER,
        payload: request
    }
}

user_reducer.js

import {
    LOGIN_USER, REGISTER_USER, AUTH_USER
} from '../_actions/types'

export default function (state={}, action) {
    switch (action.type) {
        case LOGIN_USER:
            return {...state, loginSuccess: action.payload}
            break;
        case REGISTER_USER:
            return { ...state, register: action.payload}
            break;
        case AUTH_USER:
            return { ...state, userData: action.payload}
            break;
        default:
            return state;
    }
}

LoginPage.js 수정

import React, {useState} from 'react'
import {withRouter} from 'react-router-dom'
import {useDispatch} from 'react-redux'
import {loginUser} from '../_actions/user_action'
import "./LoginRegister.css"

function LoginPage(props) {
  const dispatch = useDispatch()
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState(""); 
  
  const onEmailHandler = (event) => {
    setEmail(event.currentTarget.value);
  }

  const onPasswordHandler = (event) => {
    setPassword(event.currentTarget.value)
}

  const onSubmit = (event) => {
    event.preventDefault();

    let body = {
      email: email,
      password: password
    }

    dispatch(loginUser(body))
      .then(response => {
          if(response.payload.loginSuccess) {
              props.history.push('/')
          } else {
              alert('Error')
          }
      })
  }

  return (
      <div className="loginregister">
        <form onSubmit={onSubmit}>
            <div><input type="email" placeholder="이메일" value={email} onChange={onEmailHandler} className="loginregister__input"/></div>
            <div><input type="password" placeholder="비밀번호" value={password} onChange={onPasswordHandler} className="loginregister__input"/></div>
            <div><button type="submit" className="loginregister__button">로그인</button></div>
        </form>
      </div>
    );
  }

export default withRouter(LoginPage)

RegisterPage.js 수정

import React, {useState} from 'react'
import {withRouter} from 'react-router-dom'
import {useDispatch} from 'react-redux'
import {registerUser} from '../_actions/user_action'
import "./LoginRegister.css"

function RegisterPage(props) {
  const dispatch = useDispatch()
  const [name, setName] = useState("")
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")

  const onNameHandler = (event) => {
    setName(event.currentTarget.value)
  }
  const onEmailHandler = (event) => {
      setEmail(event.currentTarget.value)
  }

  const onPasswordHandler = (event) => {
      setPassword(event.currentTarget.value)
  }

  const onConfirmPasswordHandler = (event) => {
      setConfirmPassword(event.currentTarget.value)
  }

  const onSubmit = (event) => {
    event.preventDefault()
    if(password !== confirmPassword) {
      return alert('비밀번호와 비밀번호확인은 같아야 합니다.')
    }

    let body = {
      email: email,
      name: name,
      password: password
    }

    dispatch(registerUser(body))
      .then(response => {
        if(response.payload.success) {
            props.history.push("/sign_in")
        } else {
            alert("Failed to sign up")
      }
    })
  }

  return (
    <div className="loginregister">
      <form onSubmit={onSubmit}>
          <div><input name="name" type="text" placeholder="이름" value={name} onChange={onNameHandler} className="loginregister__input"/></div>
          <div><input name="email" type="email" placeholder="이메일" value={email} onChange={onEmailHandler} className="loginregister__input"/></div>
          <div><input name="password" type="password" placeholder="비밀번호" value={password} onChange={onPasswordHandler} className="loginregister__input"/></div>
          <div><input name="confirmPassword" type="password" placeholder="비밀번호 확인" value={confirmPassword} onChange={onConfirmPasswordHandler} className="loginregister__input"/></div>
          <div><button type="submit" className="loginregister__button">계정 생성하기</button></div>
      </form>
    </div>
  );
}
export default withRouter(RegisterPage)