feat: 발주페이지 비동기 작업(리스트) #4

frontend/src/axios/POrderItemUpdateAxios.js

@@ -4,7 +4,6 @@ import swal from 'sweetalert2';
 
 //발주리스트에서 delete하면 통신
 const pOrderItemUpdateAxios = (indexData) => {
-
       axios.put(`/api/products/${indexData}`)
       .then((response) => {
         console.log(response.data);
@@ -13,7 +12,6 @@ const pOrderItemUpdateAxios = (indexData) => {
           text: '재고가 삭제되었습니다.',
           icon: 'success',
         });
-
       })
       .catch((error) => {
           swal.fire({
@@ -22,7 +20,5 @@ const pOrderItemUpdateAxios = (indexData) => {
               icon: 'error',
             });
       });
-
   };
-
 export default pOrderItemUpdateAxios;

frontend/src/index.js

@@ -1,5 +1,5 @@
 import React, { Suspense } from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import App from './App';
 import { BrowserRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';

frontend/src/redux/reducer.js

@@ -2,10 +2,12 @@ import { combineReducers } from '@reduxjs/toolkit';
 import porderModalDuck from './slices/porderModalDuck'
 import selectedProductsReducer from './slices/selectedProductsReducer'
 import selectedPOrderReducer from './slices/selectedPOrderReducer'
+import pOrderListReducer from './slices/pOrderListReducer'
 const rootReducer = combineReducers({
     porderModal: porderModalDuck,
     selectedProduct: selectedProductsReducer,
-    selectedPOrder: selectedPOrderReducer // 변경된 부분
+    selectedPOrder: selectedPOrderReducer, 
+    pOrderList: pOrderListReducer,
 });
 
 

frontend/src/redux/slices/pOrderListReducer.js

@@ -0,0 +1,20 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  products: [], // 초기 상태는 빈 배열로 설정
+};
+
+const pOrderListReducer = createSlice({
+  name: 'pOrderList',
+  initialState,
+  reducers: {
+    fetchProductsSuccess: (state, action) => {
+      state.products = action.payload;
+      console.log("reducer:"+JSON.stringify(state.products));
+
+    },
+  }
+});
+
+export const { fetchProductsSuccess } = pOrderListReducer.actions;
+export default pOrderListReducer.reducer;

frontend/src/redux/store.js

@@ -1,36 +1,25 @@
 import { configureStore } from '@reduxjs/toolkit';
-import {
-  persistReducer,
-  persistStore,
-  FLUSH,
-  REHYDRATE,
-  PAUSE,
-  PERSIST,
-  PURGE,
-  REGISTER,
-} from 'redux-persist';
-import storage from 'redux-persist/lib/storage'; // storage를 import 해줍니다.
+import { persistReducer, persistStore } from 'redux-persist';
+import storage from 'redux-persist/lib/storage';
 import createSagaMiddleware from 'redux-saga';
-import rootReducer from './reducer';
+import rootReducer from './reducer'; // rootReducer 파일 경로에 맞게 수정해야 합니다.
 
 const persistConfig = {
   key: 'root',
-  storage: storage, // 수정된 부분: storage 변수를 사용합니다.
+  storage: storage,
 };
 
-const persistedReducer = persistReducer(persistConfig, rootReducer); // 수정된 변수명
+const persistedReducer = persistReducer(persistConfig, rootReducer);
 
 const sagaMiddleware = createSagaMiddleware();
 
 const store = configureStore({
-  reducer: persistedReducer, // 수정된 변수명
+  reducer: persistedReducer,
   middleware: (getDefaultMiddleware) => {
-    const defaultMiddleware = getDefaultMiddleware({
-      serializableCheck: {
-        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
-      },
+    const customMiddleware = getDefaultMiddleware({
+      serializableCheck: false,
     });
-    return [...defaultMiddleware, sagaMiddleware];
+    return [...customMiddleware, sagaMiddleware];
   },
 });
 

frontend/src/redux/thunks/fetchProduct.js

@@ -0,0 +1,18 @@
+// 액션 타입 정의
+import axios from "axios";
+import { fetchProductsSuccess } from '../slices/pOrderListReducer'
+;
+
+
+// 비동기로 products 데이터를 가져오는 액션 크리에이터 함수
+export const fetchProducts = () => async (dispatch) => {
+  try {
+    const response = await axios.get("http://localhost:8888/api/porder/list");
+    const products = response.data;
+    console.log(products)
+    console.log("thunk: "+products);
+    dispatch(fetchProductsSuccess(products));
+  } catch (error) {
+    console.error('Error fetching products:', error);
+  }
+};

frontend/src/routes/Router.js

@@ -1,8 +1,8 @@
 import React, { lazy } from 'react';
 import { Navigate } from 'react-router-dom';
 import Loadable from '../layouts/full/shared/loadable/Loadable';
-import { exact } from 'prop-types';
-import { Tune } from '@mui/icons-material';
+// import { exact } from 'prop-types';
+// import { Tune } from '@mui/icons-material';