[redux 활용] - LOGIN

redux data flow : https://yessong.tistory.com/94?category=1255298

redux data flow
Component > Dispatch(action) > Action > Reducer > Store > Component

// Component > dispatch(action)

// loginPage.js

import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { loginUser } from "../../../_actions/user_actions";

function LoginPage(props) {

    const[Email, setEmail] = useState("");
    const[Password, setPassword] = useState("");
    const dispatch = useDispatch();
    
    
    const onSubmitHandler = (event) => {
        event.preventDefault();
        
        let body = {
            email: Email,
            password: Password
        };
        
        dispatch(loginUser(body)).then((response) => {  // dispatch이용해서 action => loginUser 취한다.
            if(response.payload.loginSuccess) {  // 서버측 확인 (users.js - server > routes > users.js)
                props.history.push("/"); // landingPage로 이동
            
            } else {
                alert("로그인 실패했습니다.");
            }
        });
    };
    
    return (
        <div>
            <form onSubmit={onSubmitHandler}>
                <label>Email</label>
                <input type="email" value={Email} onChange={onEmailHandler} />
                <label>Password</label>
                <input type="password" value-{Password} onChange={onPasswordHandler} />
                <br/>
                <button type="submit">Login</button>
            </form>
        </div>

// action

// user_actions.js

import axios from "axios";
import { LOGIN_USER } from "./types";

export function loginUser(dataToSubmit) {
    
    const request = axios
        .post("/api/users/login", dataToSubmit)
        .then((response) => response.data);   // 서버에서 받은 데이터를 request에 저장
        
    return {
        type: LOGIN_USER,
        payload: request,  // reducer로 전달
    }
}


// types.js

export const LOGIN_USER = "login_user";

// reducer

export default function(state = {}, action) {
    switch(action.type) {
        case LOGIN_USER:
            return {
                ...state,
                loginSuccess: action.payload
            }  // (nextState), store에 저장 => redux-devtools에서 확인
            break;
        ...
        
        ...
        
        default:
            return state;
        }
    }