자바스크립트 Redux Toolkit을 활용한 쿠폰 발급 시스템 개발 방법

21 Sep 2023

redux

소개

쿠폰 발급 시스템은 온라인 상에서 사용자에게 쿠폰을 발급하고, 관리하는 기능을 제공합니다. 이번 포스팅에서는 자바스크립트의 Redux Toolkit을 활용하여 쿠폰 발급 시스템을 개발하는 방법에 대해 알아보겠습니다.

Redux Toolkit 소개

Redux Toolkit은 Redux를 보다 쉽게 사용할 수 있게 해주는 도구 모음입니다. Redux를 사용하면 상태 관리를 더욱 효율적으로 처리할 수 있지만, 초기 설정과 코드량이 많아질 수 있다는 단점이 있습니다. Redux Toolkit은 이런 번거로움을 줄여주고, 개발 생산성을 높여줍니다.

프로젝트 설정

먼저, 프로젝트 폴더를 생성하고 다음 명령어를 통해 Redux Toolkit을 설치해줍니다.

npm install @reduxjs/toolkit

스토어 생성

Redux Toolkit의 configureStore 함수를 사용하여 스토어를 생성합니다. 스토어는 애플리케이션의 상태와 액션을 관리하는 중앙 저장소입니다.

// store.js

import { configureStore } from '@reduxjs/toolkit';

const store = configureStore({
  reducer: {
    // 리듀서 추가
  },
});

export default store;

리듀서 추가

리듀서는 액션에 따라 상태를 변경하는 함수입니다. 이번 쿠폰 발급 시스템에서는 coupons라는 리듀서를 추가합니다.

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  coupons: [],
};

const couponSlice = createSlice({
  name: 'coupons',
  initialState,
  reducers: {
    addCoupon: (state, action) => {
      state.coupons.push(action.payload);
    },
    removeCoupon: (state, action) => {
      state.coupons = state.coupons.filter(coupon => coupon.id !== action.payload);
    },
  },
});

export const { addCoupon, removeCoupon } = couponSlice.actions;

export default couponSlice.reducer;

액션 디스패치

쿠폰을 발급하거나 삭제할 때는 액션을 디스패치(dispatch)해야 합니다. 액션은 dispatch 함수를 통해 실행되며, 리듀서에서 액션에 따라 상태를 변경합니다.

import { useDispatch } from 'react-redux';
import { addCoupon, removeCoupon } from './couponSlice';

const CouponManagement = () => {
  const dispatch = useDispatch();

  const handleAddCoupon = (coupon) => {
    dispatch(addCoupon(coupon));
  };

  const handleRemoveCoupon = (couponId) => {
    dispatch(removeCoupon(couponId));
  };

  return (
    // 쿠폰 관련 컴포넌트
  );
};

export default CouponManagement;

#redux #couponapp