Redux로 장바구니 작업 및 감속기 빌드

장바구니 앱에서 필요한 간단한 액션과 리듀서에 대한 블로그입니다. 여기에서는 사용된 모든 UI를 기록하지 않고 redux 스토어에서 상태를 관리하고 그에 따라 업데이트하는 방법에 대해서만 설명합니다.

여기 다섯 가지 시나리오에 대한 액션과 리듀서를 작성하고 있습니다.

장바구니에 담기

카트에서 제거

제품 수량 늘리기

상품수량감소

장바구니 버리기

먼저 actionTypes.js , actions.js 및 reducer.js 세 개의 파일을 만들어야 합니다. 먼저 actionTypes.js 파일을 작성하고 모든 작업 유형을 이와 같이 정의합니다.

export const ADD_TO_CART = 'ADD_TO_CART';
export const REMOVE_FROM_CART = 'REMOVE_FROM_CART';
export const ADD_QUANTITY = 'ADD_QUANTITY';
export const SUB_QUANTITY = 'SUB_QUANTITY';
export const EMPTY_CART = 'EMPTY_CART';

우리actions.js는 이제 이렇게 보일 것입니다.

export const addToCart = id => {
  return {
    type: ADD_TO_CART,
    id
  };
};
export const removeFromCart = id => {
  return {
    type: REMOVE_FROM_CART,
    id,
  };
};
export const subtractQuantity = id => {
  return {
    type: SUB_QUANTITY,
    id,
  };
};
export const addQuantity = id => {
  return {
    type: ADD_QUANTITY,
    id,
  };
};
export const emptyCart = () => {
  return {
    type: EMPTY_CART,
  };
};

여기에서 위의 actionTypes.js 파일에서 UR 작업 유형을 가져와야 합니다. 액션에서 우리는 제품의 id만 얻고 각각의 액션 유형과 id로 리듀서로 돌아갑니다. 비우기/카트 버리기 작업에는 ID가 필요하지 않으며 전체 카트를 버립니다.

감속기를 작성하기 전에 내 제품 json의 샘플을 보여주고 싶습니다.

"products": [
    {
      "id": 1,
      "name": "Perfume",
      "image": "https://image.shutterstock.com/z/stock-photo-vintage-red-shoes-on-white-background-92008067.jpg",
      "price": 200,
      "quantity": 1,
      "selected": false
    }
]

이제 실제 작업은 reducer.js에서 완료됩니다.

const initialState = {
  products: [],
};
const ShoppinReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      return {
        ...state,
        products: state.products.map(product =>
          product.id === action.id ? {...product, selected: true} : product,
        ),
      };
    case REMOVE_FROM_CART:
      return {
        ...state,
        products: state.products.map(product =>
          product.id === action.id
            ? {...product, selected: false, quantity: 1}
            : product,
        ),
      };
    case ADD_QUANTITY:
      return {
        ...state,
        products: state.products.map(product =>
          product.id === action.id
            ? {...product, quantity: product.quantity + 1}
            : product,
        ),
      };
    case SUB_QUANTITY:
      return {
        ...state,
        products: state.products.map(product =>
          product.id === action.id
            ? {
                ...product,
                quantity: product.quantity !== 1 ? product.quantity - 1 : 1,
              }
            : product,
        ),
      };
    case EMPTY_CART:
      return {
        ...state,
        products: state.products.map(product =>
          product.selected
            ? {...product, selected: false, quantity: 1}
            : product,
        ),
      };
    default:
      return state;
  }
};
export {ShoppinReducer};

이제 카트의 기본 기능이 완료되었습니다. 나는 당신이 그것을 좋아하고 더 많은 블로그에 대한 내 프로필을 방문하시기 바랍니다. 감사!


.ltag__user__id__69481 .follow-action-button {
배경색: #db7bc6 !important;
색상: #ffffff !중요;
테두리 색상: #db7bc6 !important;
}

아니카 칸 팔로우

Software Engineer by profession, Artist by heart