리덕스 장바구니 코드 뜯어보기

 

Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다.

 

 

아무리 읽어봐도 어려운거 같다..

 

각설하고 코드부터 보는게 더 나을수도 있다는 생각에  장바구니 예제를 꼼꼼히 뜯어보자!

 

 

파일 구조 보기

src

   ㄴApp.js

   ㄴcomponents

                      ㄴCart

                              ㄴCart..js

                              ㄴCartItem

                                           ㄴCartItem.js

                       ㄴNavbar

                                   ㄴNavber.js

                        ㄴProducts

                                      ㄴProducts.js

                                      ㄴProduct

                                                   ㄴProduct.js

    ㄴredux

              ㄴstore.js

              ㄴrootReducer.js

              ㄴShopping

                             ㄴshopping-actions.js

                             ㄴshopping-reducers.js

                             ㄴshopping-types.js

 

 

 

components에 들어가 있는 부분을 제외하고!

 

우선 shopping-types.js

export const ADD_TO_CART = "ADD_TO_CART";
export const ADJUST_ITEM_QTY = "ADJUST_ITEM_QTY";
export const REMOVE_FROM_CART = "REMOVE_FROM_CART";
export const LOAD_CURRENT_ITEM = "LOAD_CURRENT_ITEM";

 

행동에 맞는 타입 지정

 

shopping-actions.js

import * as actionTypes from "./shopping-types";

export const addToCart = (itemID) => {
  return {
    type: actionTypes.ADD_TO_CART,
    payload: {
      id: itemID,
    },
  };
};

export const removeFromCart = (itemID) => {
  return {
    type: actionTypes.REMOVE_FROM_CART,
    payload: {
      id: itemID,
    },
  };
};

export const adjustItemQty = (itemID, qty) => {
  return {
    type: actionTypes.ADJUST_ITEM_QTY,
    payload: {
      id: itemID,
      qty,
    },
  };
};

export const loadCurrentItem = (item) => {
  return {
    type: actionTypes.LOAD_CURRENT_ITEM,
    payload: item,
  };
};

 

변화될 값 지정

 

 

shopping-reducers.js

 

실질적으로 변화를 만드는곳

 

import * as actionTypes from "./shopping-types";

const INITIAL_STATE = {
  products: [...  값 생략],
  cart: [],
  currentItem: null,
};

const shopReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case actionTypes.ADD_TO_CART:
      // Great Item data from products array
      const item = state.products.find(  			//선택한 물품
        (product) => product.id === action.payload.id
      );
      // Check if Item is in cart already
      const inCart = state.cart.find((item) =>		//카트에 해당물품 검색
        item.id === action.payload.id ? true : false
      );

      return {
        ...state,
        cart: inCart				//카트에 해당되는 물품 있다면
          ? state.cart.map((item) =>
              item.id === action.payload.id
                ? { ...item, qty: item.qty + 1 }	//해당물품 수량 +1
                : item
            )
          : [...state.cart, { ...item, qty: 1 }],	//없다면 카트에 새로추가
      };
    case actionTypes.REMOVE_FROM_CART:
      return {
        ...state,
        cart: state.cart.filter((item) => item.id !== action.payload.id),
      };			//필터 함수로 해당 물품 제외
    case actionTypes.ADJUST_ITEM_QTY:
      return {
        ...state,
        cart: state.cart.map((item) =>
          item.id === action.payload.id
            ? { ...item, qty: +action.payload.qty }	//수량 조정
            : item
        ),
      };
    case actionTypes.LOAD_CURRENT_ITEM:
      return {
        ...state,
        currentItem: action.payload,
      };
    default:
      return state;
  }
};

export default shopReducer;