김건희

[Add] Login Redux Setting

1 import React, { useCallback, useState } from "react"; 1 import React, { useCallback, useState } from "react";
2 +import { useDispatch } from "react-redux";
3 +import { login } from "../../../modules/user";
2 import "../style/LoginPage.scss" 4 import "../style/LoginPage.scss"
3 5
4 function LoginPage(props) { 6 function LoginPage(props) {
7 + const dispatch = useDispatch();
5 8
6 const [Id, setId] = useState(""); 9 const [Id, setId] = useState("");
7 const [Password, setPassword] = useState(""); 10 const [Password, setPassword] = useState("");
...@@ -51,12 +54,21 @@ function LoginPage(props) { ...@@ -51,12 +54,21 @@ function LoginPage(props) {
51 setCheckLoginError(false); 54 setCheckLoginError(false);
52 } 55 }
53 56
54 - // login data 57 + // login
55 if (!checkLoginError) { 58 if (!checkLoginError) {
56 const UserData = { 59 const UserData = {
57 id: Id, 60 id: Id,
58 password: Password, 61 password: Password,
59 }; 62 };
63 +
64 + dispatch(login(UserData))
65 + .then(res => {
66 + if (res.payload.logged) {
67 + props.history.push('/register');
68 + } else {
69 + alert(res.payload.error);
70 + }
71 + })
60 } 72 }
61 73
62 }, [checkIdError, checkPasswordError, Password]); 74 }, [checkIdError, checkPasswordError, Password]);
......
1 import axios from 'axios'; 1 import axios from 'axios';
2 2
3 const REGISTER = 'user/REGISTER'; 3 const REGISTER = 'user/REGISTER';
4 +const LOGIN = 'user/LOGIN'
4 5
5 const InitialState = { 6 const InitialState = {
7 + logged: false,
6 name: 'test', 8 name: 'test',
7 id: 'test123', 9 id: 'test123',
8 password: 'test1111~', 10 password: 'test1111~',
...@@ -19,11 +21,24 @@ export function register(data) { ...@@ -19,11 +21,24 @@ export function register(data) {
19 } 21 }
20 }; 22 };
21 23
24 +export function login(data) {
25 + const req = axios.post('http://localhost:4000/login', data)
26 + .then(res => res.date);
27 +
28 + return {
29 + type: LOGIN,
30 + payload: req,
31 + }
32 +};
33 +
22 export default function (state = InitialState, action) { 34 export default function (state = InitialState, action) {
23 switch (action.type) { 35 switch (action.type) {
24 case REGISTER: 36 case REGISTER:
25 return {...state, register: action.payload}; 37 return {...state, register: action.payload};
26 break; 38 break;
39 + case LOGIN:
40 + return {...state, logged: action.payload};
41 + break;
27 default: 42 default:
28 return state; 43 return state;
29 } 44 }
......