React 미들웨어

1. 미들웨어

•  리덕스 미들웨어는 액션을 디스패치했을 때 리듀서에서 이를 처리하기 전에 지정된 작업을 실행한다.
• 즉, 액션과 리듀서 사이의 중간 단계 역할을 한다.

 

기본 구조

const loggerMiddleware = (store) => (next) => (action) => {
  // 미들웨어 기본구조
};

export default loggerMiddleware;

 

2. 미들웨어 관련 라이브러리

2.1 redux-logger

• redux middleware 사용 시 브라우저 콘솔에 깔끔하게 출력된다.

 

3. 비동기 작업을 위한 미들웨어

• redux-thunk: 비동기 작업을 처리할 때 가장 많이 사용하는 미들웨어이고 객체가 아닌 함수 형태의 액션을 디스패치할 수 있게 해줌
• thunk: 특정작업을 나중에 할 수 있도록 미루기 위해 함수 형태로 감싼 것을 의미
• redux-saga: redux-thunk 다음으로 가장 많이 사용되는 비동기 작업 관련 미들웨어 라이브러리. 특정 액션이 디스패치되었을 때 정해진 로직에 따라 다른 액션을 디스패치 시키는 규칙을 작성하여 비동기 작업을 처리할 수 있게 해줌