[React] Redux Middleware는 어떤 용도로 사용될까?

 

 

 

💡리덕스 미들웨어는 보통 모니터링, 비동기 처리 용도로 사용된다.

 

1. Redux Middleware란?

• 액션이 스토어로 dispatch 된 후 리듀서에 도달하기 전과 상태변경이 완료된 후 수행할 중앙집중화된 작업을 지정할 수 있는 함수이다.
• 단일 스토어로 내부에 등록해서 모든 액션이 스토어를 거쳐가게 한다.
• 상태 또한 스토어에 저장된다. 

 

1.1 Middleware 전달 과정

1. dispatch(action) 전달한다.

2. 첫번째 미들웨어를 거쳐 어떤 작업을 한다.

3. next(action)을 해주고 다음 미들웨어로 넘어간다. 

4. 두번째 미들웨어를 거쳐 어떤 작업을 한다.

5. 이런식으로 지정한 미들웨어수를 다 거쳐 끝나면 리듀서로 넘어간다.

6. 상태가 변경되고 다시 역순으로 미들웨어를 다시 거쳐 처리된다. 

 

💡 여기서 미들웨어를 건너뛰고 리듀서로 바로 넘어갈 순 없다. 만약 미들웨어에서 아무 작업을 하지 않으면 넘어갈 수는 있지만 건너뛸순 없다. 그리고 꼭 next(action)을 해줘야 다음으로 넘어갈 수 있다. 

1.2 사용예제 코드

const logger = store => next => action => {
   console.log('## 액션 : ', action);
   console.log('## 상태(전) : ', store.getState());
   next(action);
   console.log('## 상태(후) : ', store.getState());
};

const AppStore = configureStore({ 
    reducer: RootReducer,
    middleware: (getDefaultMiddleware) => {
    return getDefaultMiddleware({ serializableCheck: false }).concat(logger);
    }
});

 

 

💡 이런식으로 상태 전, 후를 비교하며 디버깅 하며 테스트한다. 

 

2. 미들웨어와 비동기 처리 

 

2.1 왜 비동기 처리를 하는걸까?

• 동기적으로 처리되면 그만큼 처리하는 시간이 길어지면서 브라우저가 먹통이되는 이슈가 발생한다. 
• 대표적으로 백엔드 API와 통신할 때 setTimeout를 이용하여 일정시간 뒤에 처리될 수 있는 비동기 처리를 해줘야 한다. 

 

2.2 리덕스에서는 비동기 처리를 위해 왜 미들웨어를 사용해야할까?

• 쉽게말해 비동기 처리를 할 좋은 위치가 없어서이다.
• 리듀서는 순수함수이기 때문에 부수효과가 없어야 하므로 안된다.
• 액션생성자는 값을 리턴하기 때문에 동기적으로 동작하므로 안된다. 

 

3. redux-thunk 

• 비동기 처리를 위한 리덕스용 미들웨어
• 여기서 thunk란 지연된 실행을 위해 표현식으로 만든 함수이다.
• ActionCreator가 Action 메시지 대신에 thunk 함수를 리턴한다. 

 

3.1 설치하기

• npm install redux-thunk
• 리덕스 툴킷은 이미 포함되어 있으므로 추가 설치할 필요가 없다.

 

3.2 사용하기

• 툴킷에는 이미 포함되어 있으므로 createAsyncThunk 툴킷 함수를 사용하면 된다. 

 

4. Redux Devtools

Redux DevTools

 

• Redux를 이용한 앱을 개발할 때 개발을 강력하게 지원하는 개발 패키지 도구
• Redux의 상태와 액션 정보를 시각화하며, 상태 변경을 추적할 수 있도록 한다. 
• 툴킷에는 이미 미들웨어로 등록이 되어있다. 
• 개발 환경일 때만 사용하도록 하기위해 따로 스토어에 설정하면 된다.

devTools: process.env.NODE_ENV !== "production"

 

• 시간여행 디버깅을 가능하게 한다. 

 

 

📌

원형섭 강사님 실시간 강의