김민태의 데브캠프 2기 - 리덕스 미들웨이

 

 

리덕스 미들웨이란 ?

액션을 dispatch 전달하고 리듀서에 도달하는 순간 사이에 사전에 지정된 작업을 실행할 수 있게 해주는 중간자이다.

 

대표적으로 로깅, 충돌보고, 비동기 API와 통신, 라우팅 등을 위해 사용한다.

 

 

 

간단하게 로그를 남기는 미들웨어를 생성하여 학습해보고자 한다.

 

우선 아래의 두 코드는 같은 로직을 수행한다.

const loggerMiddleware = (stroe) => (next) => (action) => {

};

const loggerMiddleware = function (store) {
	return function (next)
    	return function (action){
        
        }
     };
 };

 

그 다음 아래의 내용을 추가하여, Reducer에 도달하기전에 로그가 찍히는 값을 확인해보자.

 

const loggerMiddleware = (store: any) => (next: any) => (action: any) => {
  console.log('store : ',store);
  console.log('action : ',action);
  next(action);
}

const middleware = applyMiddleware(loggerMiddleware)
const store = createStore(rootReducer,middleware);

 

 

결과화면