본문으로 바로가기

[React] redux-logger 사용 방법

category 1. 웹개발/1_1_5 React JS 2022. 1. 10. 12:38

 

redux 미들웨어를 사용하여 개발을 진행할 때, 리듀서가 실행되기 전과 실행된 후를 log로 비교할 때 보기 어려웠던 점을 redux-logger 라이브러리로 보다 편리하게 확인하여 비교할 수 있습니다.

 

 

[redux-logger 설치]

cmd 창을 열어 작업하고 계신 프로젝트 경로로 이동해서 아래 명령어를 입력하면 설치가 완료됩니다.

npm install --save react-redux

 

 

[적용]

여러개의 미들웨어도 적용 가능합니다. 미들웨어가 여러개인 경우 인수 순서대로 진행이 됩니다.

import {createStore, applyMiddleware} from 'redux';
import {createLogger} from 'redux-logger';
import reducers from './reducers';

// react-logger
const logger = createLogger();

// 여러개인 경우, 인수에 추가 ex) applyMiddleware(logger, logger2 ...)
const store = createStore(reducers, applyMiddleware(logger));

 

 

[콘솔 화면]