Redux 따라 만들어보기 (7) - 로거 미들웨어 만들기

 

하나의 웹 애플리케이션에 수백개의 action이 만들어지는데, 이를 console로 확인하기엔 어려움이 있어서

실제 데이터가 어떻게 흘러하는지 파악하는 로거 미들웨어를 만들어보고자 한다.

 

 

다음과 같이 작성할 수 있다.

여기서 next는 dispatch로 생각하면 된다

export const logger = store => next => action => {
    next(action)
}

 

사용할 때는 ..

const store = createStore(reducer, [logger]);

 

실제로 로그를 남겨보자!

export const logger = store => next => action => {

    const currentState = store.getStore();

    console.groupCollapsed('action logger = ', action.type); // 한번 클립으로 접기
    console.log('currentState : ', currentState);
    console.log('action payload : ', action.payload);
    console.groupEnd();

    next(action)
}