Reactotron

Reactotron?

React JS 또는 React Native를 검사 할 수 있는 도구.

프로젝트를 진행하면서 redux-logger를 통해서 브라우저의 개발자 도구 콘솔창을 통해서 진행상황등을 확인했다.

Reactotron을 사용하고 설정을 해주면 개별의 프로그램을 연결시켜서 간단하게 상태를 확인 할 수도 있고,

넣고자 하는 API기능 같은 것들을 테스트 해볼 수도 있는 도구

프로그램은 Reactotron에서 다운로드 받을 수 있다

React & Redux 와 Reactotron 연결하기

필요한 라이브러리 설치

#> yarn add reactotron-react-js reactotron-redux --dev

개발 환경에서만 사용할 것이기 때문에 --dev 옵션을 준다

소스 디렉터리에 리액투트론 설정파일 생성 ( ReactotronConfig.js )

import Reactotron from "reactotron-react-js";
import { reactotronRedux } from "reactotron-redux";

Reactotron.configure({name:"Jamiegram"})
    .use(reactotronRedux())
    .connect();
export default Reactotron;

리액트 앱에 리액투트론 연결

# index.js ( 리액트 앱에는 그냥 임포트만 해주면 된다 )

import "ReactotronConfig";

# 리덕스 스토어 설정파일( ConfigureStore.js )

import Reactotron from "ReactotronConfig";

let store;
if(env === 'development'){
    store = initialState => 
        Reactotron.createStore(reducer, applyMiddleware(...middlewares));    
} else {
    store = initialState => createStore(reducer, applyMiddleware(...middlewares));
}

리덕스에 연결할 때는 개발환경이라면 스토어를 리액투트론으로 생성하고,

아니라면 스토어를 생성해서 내보내도록 만든다.

이렇게 설정하고 나서 리액트 앱을 실행하고 리액투트론을 실행시키면

다음과 같이 리액트 앱의 상황을 알려주는 정보를 볼 수 있고, 액션을 수정해서 새롭게 보낼 수도 있다.

개발환경에서 리액트 앱을 개발하는데 간편하게 많은 도움을 주는 프로그램