React - 환경변수 설정 !(configureStore)

리액트로 작업을 하다보면 

react-dev-tool를 쓰게 되는데 여기서 redux의 전체적인 데이터 구조가 다 보인다 

=> 데이터를 조작할수 있기 때문에 개발환경과 배포환경을 구분하는 것이 필욥!!!!

 

configureStore.js

import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
//미들웨어를 사용하면 액션 객체가 아닌 함수를 디스패치 할 수 있다. 
import { createBrowserHistory } from 'history';
import { connectRouter } from 'connected-react-router';

import User from './modules/user';
import Room from './modules/room';
export const history = createBrowserHistory();

const rootReducer = combineReducers({
  room: Room,
  user: User,
  router: connectRouter(history),
});

const middleWares = [thunk.withExtraArgument({ history: history })];

// 지금이 어느 환경인 지 알려줘요. (개발환경, 프로덕션(배포)환경 ...)
const env = process.env.NODE_ENV;

// 개발환경에서는 로거라는 걸 하나만 더 써볼게요.
if (env === 'development') {
  const { logger } = require('redux-logger');
  middleWares.push(logger);
}

//reducer를 모아 하나의 reducer로 관리 할 수 있게 해준다 
const composeEnhancers =
  typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
        // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
      })
    : compose;

const enhancer = env==='production'
? compose(
  applyMiddleware(...middleWares)
)
: composeEnhancers(
  applyMiddleware(...middleWares)
)

let store = (initialStore) => createStore(rootReducer, enhancer);
export default store();