Redux Thunk를 사용하여 상품 재고 관리하기

18 Oct 2023

redux

상품 재고 관리는 많은 E-commerce 웹 애플리케이션에서 중요한 기능 중 하나입니다. Redux Thunk를 활용하면 상품 재고 관리를 효과적으로 구현할 수 있습니다.

Redux Thunk란?

Redux Thunk는 Redux 미들웨어의 하나로서, 비동기 작업을 처리하기 위해 사용됩니다. Redux Thunk는 액션 생성자 함수에서 비동기 작업을 수행할 수 있게 해주고, 액션 객체 대신 함수를 반환할 수 있습니다.

상품 재고 관리를 위한 Redux Thunk 구현 방법

액션 타입 정의하기: 상품 재고를 관리하기 위해 액션 타입을 먼저 정의합니다. 예를 들어, “FETCH_STOCK_REQUEST”, “FETCH_STOCK_SUCCESS”, “FETCH_STOCK_FAILURE”와 같은 액션 타입을 정의할 수 있습니다.
액션 생성자 함수 작성하기: Redux Thunk를 사용하여 상품 재고를 가져오는 액션 생성자 함수를 작성합니다. 이 함수는 비동기 작업을 수행하고, 상태를 변경하는 액션 객체를 반환합니다. 실제 상품 재고를 가져오는 비동기 작업은 API 호출이나 데이터베이스 조회와 같은 작업을 포함할 수 있습니다.

// 액션 타입 정의
const FETCH_STOCK_REQUEST = 'FETCH_STOCK_REQUEST';
const FETCH_STOCK_SUCCESS = 'FETCH_STOCK_SUCCESS';
const FETCH_STOCK_FAILURE = 'FETCH_STOCK_FAILURE';

// 액션 생성자 함수
const fetchStock = () => {
  return async (dispatch) => {
    dispatch({ type: FETCH_STOCK_REQUEST });
    try {
      const response = await fetch('/api/stock');
      const data = await response.json();
      dispatch({ type: FETCH_STOCK_SUCCESS, payload: data });
    } catch (error) {
      dispatch({ type: FETCH_STOCK_FAILURE, payload: error });
    }
  };
};

리듀서 작성하기: 액션 타입에 따라 상태를 변경하는 리듀서를 작성합니다. 위에서 정의한 액션 타입에 대한 상태 변경을 처리하도록 리듀서를 구현합니다.

const initialState = {
  stock: [],
  loading: false,
  error: null,
};

const stockReducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_STOCK_REQUEST:
      return { ...state, loading: true };
    case FETCH_STOCK_SUCCESS:
      return { ...state, loading: false, stock: action.payload };
    case FETCH_STOCK_FAILURE:
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
};

컴포넌트에서 상태 사용하기: 상품 재고 관리를 위해 구현한 리덕스 상태를 컴포넌트에서 사용합니다. useSelector 훅을 사용하여 상태를 가져오고, useEffect 훅을 사용하여 필요한 경우 액션 생성자 함수를 호출하여 상태를 업데이트할 수 있습니다.

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchStock } from '../actions/stockActions';

const StockComponent = () => {
  const stock = useSelector((state) => state.stock);
  const loading = useSelector((state) => state.loading);
  const error = useSelector((state) => state.error);

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchStock());
  }, []);

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <div>
      <h2>Stock</h2>
      {stock.map((item) => (
        <p key={item.id}>{item.name}: {item.quantity}</p>
      ))}
    </div>
  );
};

마무리

Redux Thunk를 사용하면 비동기 작업을 처리하는 상품 재고 관리 기능을 손쉽게 구현할 수 있습니다. 액션 생성자 함수에서 비동기 작업을 처리하고, 리듀서에서 상태 변경을 처리하여 원활한 상태 관리를 할 수 있습니다. Redux Thunk를 사용하여 상품 재고 관리 기능을 구현해보세요!

#Reference