redux-devtools-extension

redux-devtools를 설정해 놓으면 redux에서 굉장히 유리하게 개발할 수 있다. 설치 및 설정해 놓는것을 적극 추천한다.

devtools 링크
첫째로 위 링크를 클릭해 크롬에 추가해준다.
이제 compose를 이용해 연결할 것 이다.

const store = createStore(
  rootReducer,
  compose(
    applyMiddleware(sagaMiddleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

위의 코드처럼 하면 redux devtool 실행이 될 것이고 요청에 따른 값들을 보면서 개발하기 편할 것 이다.
근데 redux-devtools-extension라는 것을 알았다. 좀 더 깔끔해 보이는 코드를 구사 할 수 있는 것 같기에 사용해 보왔다.

npm i redux-devtools-extension
npm i redux-devtools-extension -D

아래 개발환경에만 쓰이는 명령어를 추천한다. 왜냐하면 나중에 배포할 때 고객들에게 이 프로젝트가 쓰여졌을때 redux-devtool로 인해 data값이 보여질 수 있다. 이러한 점은 나중에 해킹에 위험이 있으므로 개발환경에서 devtool을 사용한다.

import { composeWithDevTools } from "redux-devtools-extension";
const store = createStore(
  rootReducer,
  composeWithDevTools(
    applyMiddleware(sagaMiddleware),
  )
);
//바뀐점 composeWithDevTools import후 compose를 composeWithDevTools 했다.

이렇게 하면 devtool 연결 끝 하지만 배포할때에 보여질 수 도 있다는 거에 계속 신경을 쓰자면

const enhancer =
  process.env.NODE_ENV === "production" //모드와 devtool을 다르게 설정
    ? compose(applyMiddleware(thunkMiddleware))
    : composeWithDevTools(applyMiddleware(thunkMiddleware));
const store = createStore(rootReducer,enhancer)

이렇게 enhancer로 개발환경에 따른 devtool연결 나는 나를 믿지 않기에 이렇게 한번 더 배포할때 보여질 수 도 있는걸 방지