store.js 분석 | redux-logger, devtool

1 import { applyMiddleware, createStore } from 'redux';
2 import { createLogger } from 'redux-logger'
3 import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
4 import { promiseMiddleware, localStorageMiddleware } from './middleware';
5 import reducer from './reducer';

6 import { routerMiddleware } from 'react-router-redux'
7 import createHistory from 'history/createBrowserHistory';

8 export const history = createHistory();

// Build the middleware for intercepting and dispatching navigation actions
9 const myRouterMiddleware = routerMiddleware(history);

const getMiddleware = () => {
  if (process.env.NODE_ENV === 'production') {
    return applyMiddleware(myRouterMiddleware, promiseMiddleware, localStorageMiddleware);
  } else {
    // Enable additional logging in non-production environments.
    return applyMiddleware(myRouterMiddleware, promiseMiddleware, localStorageMiddleware, createLogger())
  }
};

export const store = createStore(
  reducer, composeWithDevTools(getMiddleware()));

 

2. import { createLogger } from 'redux-logger';

redux-logger : 로그(redux action, next state 등의 기록) 출력 형식을 보기 좋게 바꾼 미들웨어다.

사실 redux-devtools-extension이 있다면 사용할 필요가 없다. realword-app에서는 10번 줄에서 development환경에서 createLogger를 사용하도록 설정했다.

redux-logger 예시

 

3 import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';

redux-devtools-extension : agmall-app을 제작할 때 Chrome에서 스토어의 상태 등을 조회할 수 있었다. 이 조회 툴을 개발자 도구(f12)에서 확인할 수 있는 것!

 

 

6 import { routerMiddleware } from 'react-router-redux'
7 import createHistory from 'history/createBrowserHistory';

6, 7번은 browser를 history로 관리하기 위해서 같이 쓰는 구문이다. browserHistory.push( )는 React Router v3에서 사용했던 방식이다.

React Router v4에서는 props.history.push할 router에 withRouter로 wrapping하면 된다.