Redux :: 미들웨어

Middle Ware 란?

미들웨어는 액션이 dispatch 되기 전 수행하는 작업을 설정한다. 미들웨어는 액션과 리듀서 사이의 중가자라 할 수 있다.

 

미들웨어가 필요한 이유는 효과적으로 비동기 액션을 디스패치 하기 위해서이다. 리듀서의 경우 동기작업만 처리할 수 있다. 예를 들어 서버에서 데이터를 받아와 dispatch 되어야 하는 경우 미들웨어를 사용한다.

(리듀서 내에서는 동기 작업만 처리하고 컴포넌트밖에서 axios를 사용하여 비동기작업을 처리할 수도 있다.

하지만 이렇게 사용하면 결국 미들웨어를 사용하는 것과 같은 모양새가 되므로 미들웨어를 사용하는 것이 효율적이다.)

 

미들웨어를 통해 전달받은 액션을 콘솔에 기록할 수 있고, 액션 취소, 다른 종류의 액션을 추가적으로 디스패치 할 수 있다. 미들웨어 사용하여 로깅이나 충돌보고, 비동기 API와의 통신, 리우팅 등등에 사용할 수 있다.

 

유명한 리덕스 미들웨어 라이브러리로는 Redux-Saga, Redux-thunk 가 있다.

직접 미들웨어를 만들어서도 사용할 수 있다. 

 

 

 

미들웨어 형태

 

미들웨어는 기본적으로 삼중 중첩 함수이다.

그러므로 다음과 같은 형태를 가진다.

(첫번째는 화살표 함수, 두번째는 일반함수로 같은 함수이다.

아직 화살표함수가 헷갈려서 일반함수도 적어봤다.)

 

{dispatch, getState}는 store 안에 있는 API 이므로 store을 사용해도 된다.

next는 액션을 다음 미들 웨어에게 전달하는 함수이다. 보통 next(action) 형태로 사용된다.

(다음 미들웨어가 없다면 dispatch된다.)

action은 현재 처리하고 있는 액션 객체이다.

 

이 함수 안에서 리턴하는 값이 dispatch(action)의 결과물이 된다.

 

 

https://velopert.com/3401

미들웨어는 위와 같은 구조로 작동한다.

리덕스에서 여러 미들웨어를 등록하고, next(action)을 호출한다면 다음 미들웨어로  액션이 넘어간다.

미들웨어에서 dispatch를 사용하면 다른 액션을 추가적으로 발생 시킬 수 있다.

 

미들웨어 사용하기

미들웨어를 사용하기 위해 createStore의 첫번째 인자를 리듀서로, 두번째 인자를 미들웨어로 설정한다.

 

 

enhancer의 삼항연산자는 배포 모드일 때는 compose를,

개발자 모드일 때는 composeWithDevTools를 사용하도록 설정했다.

 

 

 

 

참고
https://react.vlpt.us/redux-middleware/02-make-middleware.html
https://velopert.com/3401