[수정] panelQueueMiddleware 등록 및 문서 업데이트
## 코드 수정 - store.js에 panelQueueMiddleware import 및 등록 - 큐 기반 패널 액션 시스템이 작동하기 위해 필수 - applyMiddleware에 panelQueueMiddleware 추가 ## 문서 수정 1. README.md - "설치 및 설정" 섹션 추가 - panelQueueMiddleware 등록 필수 사항 명시 2. 04-solution-queue-system.md - "사전 요구사항" 섹션 추가 - 미들웨어 등록 코드 예제 포함 3. 05-usage-patterns.md - "초기 설정 확인사항" 체크리스트 추가 - panelQueueMiddleware 등록 여부 확인 항목 추가 ## 이유 - panelQueueMiddleware가 등록되지 않으면 큐 시스템이 작동하지 않음 - ENQUEUE_PANEL_ACTION dispatch 시 자동으로 PROCESS_PANEL_QUEUE가 실행되지 않음 - 문서에 설정 방법이 명확하지 않아 사용자가 놓칠 수 있음 ## 관련 파일 - src/store/store.js (수정) - .docs/dispatch-async/README.md (수정) - .docs/dispatch-async/04-solution-queue-system.md (수정) - .docs/dispatch-async/05-usage-patterns.md (수정)
This commit is contained in:
@@ -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)
|
||||
);
|
||||
```
|
||||
|
||||
미들웨어를 등록하지 않으면 큐에 액션이 추가되어도 자동으로 처리되지 않습니다!
|
||||
|
||||
## 🎯 핵심 개념
|
||||
|
||||
### 왜 큐 시스템이 필요한가?
|
||||
|
||||
@@ -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 사용 시)
|
||||
|
||||
### 기능 구현 전 확인사항
|
||||
|
||||
- [ ] 패널 관련 액션인가? → 큐 시스템 사용
|
||||
|
||||
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user