diff --git a/.docs/dispatch-async/04-solution-queue-system.md b/.docs/dispatch-async/04-solution-queue-system.md index d91f4a4b..50801468 100644 --- a/.docs/dispatch-async/04-solution-queue-system.md +++ b/.docs/dispatch-async/04-solution-queue-system.md @@ -6,6 +6,7 @@ - `src/actions/queuedPanelActions.js` - `src/middleware/panelQueueMiddleware.js` - `src/reducers/panelReducer.js` +- `src/store/store.js` (미들웨어 등록 필요) **작성일**: 2025-11-06 **커밋**: @@ -14,6 +15,23 @@ 미들웨어 기반의 **액션 큐 처리 시스템**으로, 패널 액션들을 순차적으로 실행합니다. +## ⚠️ 사전 요구사항 + +큐 시스템을 사용하려면 **반드시** store에 panelQueueMiddleware를 등록해야 합니다. + +**파일**: `src/store/store.js` + +```javascript +import panelQueueMiddleware from '../middleware/panelQueueMiddleware'; + +export const store = createStore( + rootReducer, + applyMiddleware(thunk, panelHistoryMiddleware, autoCloseMiddleware, panelQueueMiddleware) +); +``` + +미들웨어를 등록하지 않으면 큐에 액션이 추가되어도 자동으로 처리되지 않습니다! + ## 🎯 핵심 개념 ### 왜 큐 시스템이 필요한가? diff --git a/.docs/dispatch-async/05-usage-patterns.md b/.docs/dispatch-async/05-usage-patterns.md index ef62bec3..4d09d1c4 100644 --- a/.docs/dispatch-async/05-usage-patterns.md +++ b/.docs/dispatch-async/05-usage-patterns.md @@ -767,6 +767,20 @@ dispatch(fetchDataWithLoading(URLS.GET_CART, types.GET_CART)); ## 체크리스트 +### 초기 설정 확인사항 + +- [ ] **panelQueueMiddleware가 store.js에 등록되어 있는가?** (큐 시스템 사용 시 필수!) + ```javascript + // src/store/store.js + import panelQueueMiddleware from '../middleware/panelQueueMiddleware'; + + export const store = createStore( + rootReducer, + applyMiddleware(thunk, panelHistoryMiddleware, autoCloseMiddleware, panelQueueMiddleware) + ); + ``` +- [ ] TAxiosPromise가 import되어 있는가? (withLoadingState 사용 시) + ### 기능 구현 전 확인사항 - [ ] 패널 관련 액션인가? → 큐 시스템 사용 diff --git a/.docs/dispatch-async/README.md b/.docs/dispatch-async/README.md index 9dc1ecb8..f5aba523 100644 --- a/.docs/dispatch-async/README.md +++ b/.docs/dispatch-async/README.md @@ -12,6 +12,36 @@ 이 문서는 Redux-thunk 환경에서 여러 개의 dispatch를 순차적으로 실행할 때 순서가 보장되지 않는 문제를 해결하기 위해 구현된 솔루션들을 정리한 문서입니다. +## ⚙️ 설치 및 설정 + +### 필수: panelQueueMiddleware 등록 + +큐 기반 패널 액션 시스템을 사용하려면 **반드시** store에 미들웨어를 등록해야 합니다. + +**파일**: `src/store/store.js` + +```javascript +import { applyMiddleware, combineReducers, createStore } from 'redux'; +import thunk from 'redux-thunk'; +import { panelHistoryMiddleware } from '../middleware/panelHistoryMiddleware'; +import { autoCloseMiddleware } from '../middleware/autoCloseMiddleware'; +import panelQueueMiddleware from '../middleware/panelQueueMiddleware'; // ← 추가 + +// ... reducers ... + +export const store = createStore( + rootReducer, + applyMiddleware( + thunk, + panelHistoryMiddleware, + autoCloseMiddleware, + panelQueueMiddleware // ← 추가 (맨 마지막에 위치) + ) +); +``` + +**⚠️ 중요**: panelQueueMiddleware를 등록하지 않으면 큐 시스템이 작동하지 않습니다! + ## 🚀 주요 솔루션 ### 1. dispatchHelper.js (2025-11-05) diff --git a/com.twin.app.shoptime/src/store/store.js b/com.twin.app.shoptime/src/store/store.js index 7c5c7728..9ca0e0f2 100644 --- a/com.twin.app.shoptime/src/store/store.js +++ b/com.twin.app.shoptime/src/store/store.js @@ -3,6 +3,7 @@ import thunk from 'redux-thunk'; import { autoCloseMiddleware } from '../middleware/autoCloseMiddleware'; import { panelHistoryMiddleware } from '../middleware/panelHistoryMiddleware'; +import panelQueueMiddleware from '../middleware/panelQueueMiddleware'; import { appDataReducer } from '../reducers/appDataReducer'; import { billingReducer } from '../reducers/billingReducer'; import { brandReducer } from '../reducers/brandReducer'; @@ -75,5 +76,5 @@ const rootReducer = combineReducers({ export const store = createStore( rootReducer, - applyMiddleware(thunk, panelHistoryMiddleware, autoCloseMiddleware) + applyMiddleware(thunk, panelHistoryMiddleware, autoCloseMiddleware, panelQueueMiddleware) );