[gproro-shop-app] mockAPI 로 서버 요청 보내기

 

 백엔드서버가 없으니 MockAPI를 사용해보자 

 

 

 

new resource 를 통해 api를 생성할 수 있다. 

그리고 우리는

계산하기 버튼을 누르면 서버로 요청이가고, 

장바구니 목록들을 비워줄것이다. 

 

import React, { useEffect } from 'react'

import { useAppDispatch, useAppSelector } from '../../../hooks/redux'

import styles from './Checkout.module.scss'

import { Link } from 'react-router-dom';

import { getTotalPrice } from '../../../store/cart/cart.slice';

import { useAuth } from '../../../hooks/useAuth';

//장바구니 하단에 합계랑 로그인버튼

const Checkout = () => {

    const cart = useAppSelector((state)=> state.cart);

    const dispatch = useAppDispatch();

    useEffect(()=>{

        dispatch(getTotalPrice());

    },[])

    const {isAuth} = useAuth();

   

    ⭐const sendOrder =() =>{

        dispatch(postOrder(cart));

    }

  return (

    <div className={styles.checkout}>

      <div>

        <p>

          {" "}

          <span>합계 : </span> ${cart.totalPrice.toFixed(2)}

        </p>

        {isAuth ? (

          <button

            className={styles.checkout_button}

            ⭐ onClick={() => sendOrder()}

          >

            계산하기

          </button>

        ) : (

          <Link className={styles.checkout_button} to={"/login"}>

            로그인

          </Link>

        )}

      </div>

    </div>

  );

}

export default Checkout

 

 

 

• sendOrder 함수
  • 계산하기 버튼이 클릭될 때 postOrder 비동기 액션을 호출합니다.
• postOrder가 cart 데이터를 받아 서버로 주문을 전송하게 되며,
• 주문이 성공적으로 전송되면 sendOrder 액션이 실행되어 장바구니를 초기화합니다.

 

 

 

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";

import axios from "axios";

⭐ export const postOrder = createAsyncThunk(

    "cart/postOrder",

    async(order,thunkAPI) =>{

        try{

            await axios.post(

                "https://6735c1e65995834c8a93f9b5.mockapi.io/orders",

                order

            )

            thunkAPI.dispatch(sendOrder());  // ⭐주문 전송 성공 시 장바구니 초기화

        }catch(error){

            return thunkAPI.rejectWithValue("Error sending ");

        }

    }

)

const initialState = {

    products:localStorage.getItem("cartProducts")?

        JSON.parse(localStorage.getItem("cartProducts")) : [],

    totalPrice:0,

    userId:localStorage.getItem("userId") ?

        JSON.parse(localStorage.getItem("userId") ): ""

}

export const cartSlice = createSlice({

    name:"cart",

    initialState,

    reducers:{

        setUserId:(state,action) => {

            state.userId = action.payload;

            localStorage.setItem('userId' ,JSON.stringify(state.userId));

        },

        removeUserId:(state) =>{

            state.userId = "";

            localStorage.setItem('userId' ,JSON.stringify(state.userId));

        },

        addToCart:(state,action) =>{

            state.products.push({

                ...action.payload,

                quantity:1,

                total:action.payload.price

            })

            localStorage.setItem('cartProducts',JSON.stringify(state.products));

        },

        deleteFromCart:(state,action) => {

            state.products = state.products.filter((item)=>item.id !== action.payload);

            localStorage.setItem("cartProducts",JSON.stringify(state.products));

        },

        incrementProduct:(state,action) =>{

            state.products = state.products.map((item) =>

              item.id === action.payload

                ? {

                    ...item,

                    quantity: item.quantity + 1,

                    total: item.price * (item.quantity + 1),

                  }

                : item

            );

        localStorage.setItem("cartProducts",JSON.stringify(state.products));

        },

        decrementProduct :(state,action) =>{

            state.products = state.products.map((item) =>

              item.id === action.payload

                ? {

                    ...item,

                    quantity: item.quantity - 1,

                    total: item.price * (item.quantity - 1),

                  }

                : item

            );

        localStorage.setItem("cartProducts",JSON.stringify(state.products));

        },

        getTotalPrice :(state) =>{

            state.totalPrice = state.products.reduce(

                (acc,item) => (acc += item.total),0);

            return state;

        },

        ⭐ sendOrder :(state) =>{

            state.products=[];

            //주문 보냈으면 카트에 products는 다 비워야함

            localStorage.setItem('cartProducts',JSON.stringify(state.products));

        }

    }

})

export const {

  addToCart,

  sendOrder,

  deleteFromCart,

  incrementProduct,

  decrementProduct,

  getTotalPrice,

  setUserId,

  removeUserId,

} = cartSlice.actions;

export default cartSlice.reducer;

 

다시 정리하자면...

 

1. 사용자가 로그인된 상태에서 "계산하기" 버튼을 클릭하면
2. 컴포넌트에서 sendOrder 함수가 실행되며 postOrder라는 비동기 액션이 디스패치된다.
3. postOrder는 slice 와 연결되어있고,  장바구니 데이터를 받아 서버로 주문 요청을 보내며,
4. 요청이 성공하면 cartSlice에 정의된 sendOrder 액션이 실행됩니다.
5. sendOrder 액션은 장바구니의 products 배열을 빈 배열로 설정해 장바구니를 비우고, localStorage에 저장된 장바구니 데이터도 빈 배열로 업데이트하여, 새로고침 후에도 장바구니가 비워진 상태가 유지되도록 합니다.

 

그럼 장바구니 목록들을 계산하기 버튼을 누르면 아래와같이 요청은 보내지고 장바구니는 비어진다.

네트워크 탭에서 요청 보내진것도 확인되고

 

그리고 mockAPI를 보면 orders에 들어간것을 확인할 수 있다.