From 7b946881b5949f12d6daab816ac5d689cb4407e5 Mon Sep 17 00:00:00 2001 From: Steve Kellock Date: Wed, 24 May 2017 15:58:28 -0400 Subject: [PATCH 1/3] Uses the Reactotron overlay only in __DEV__ --- boilerplate/App/Containers/App.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/boilerplate/App/Containers/App.js b/boilerplate/App/Containers/App.js index 5f0586c..fe94120 100644 --- a/boilerplate/App/Containers/App.js +++ b/boilerplate/App/Containers/App.js @@ -26,7 +26,7 @@ class App extends Component { } } -// allow reactotron overlay for fast design -const AppWithBenefits = console.tron.overlay(App) +// allow reactotron overlay for fast design in dev mode +const AppWithBenefits = __DEV__ ? console.tron.overlay(App) : App export default AppWithBenefits From d17ffd871085ff9ed7dd63e1402f2b9536d4633a Mon Sep 17 00:00:00 2001 From: Steve Kellock Date: Wed, 24 May 2017 15:58:50 -0400 Subject: [PATCH 2/3] Updates Reactotron to the latest & greatest. --- boilerplate/App/Config/ReactotronConfig.js | 41 +++++++++++----------- boilerplate/App/Services/Api.js | 7 ---- boilerplate/package.json.ejs | 7 ++-- 3 files changed, 23 insertions(+), 32 deletions(-) diff --git a/boilerplate/App/Config/ReactotronConfig.js b/boilerplate/App/Config/ReactotronConfig.js index e305de4..cab131b 100644 --- a/boilerplate/App/Config/ReactotronConfig.js +++ b/boilerplate/App/Config/ReactotronConfig.js @@ -1,35 +1,34 @@ -import { StartupTypes } from '../Redux/StartupRedux' +// import { StartupTypes } from '../Redux/StartupRedux' import Config from '../Config/DebugConfig' import Immutable from 'seamless-immutable' -import Reactotron, { overlay, trackGlobalErrors } from 'reactotron-react-native' -import apisaucePlugin from 'reactotron-apisauce' -import { reactotronRedux } from 'reactotron-redux' +import Reactotron from 'reactotron-react-native' +import { reactotronRedux as reduxPlugin } from 'reactotron-redux' import sagaPlugin from 'reactotron-redux-saga' if (Config.useReactotron) { Reactotron + // configure how & where to talk to the Desktop App .configure({ // host: '10.0.3.2' // default is localhost (on android don't forget to `adb reverse tcp:9090 tcp:9090`) - name: 'Ignite App' // would you like to see your app's name? + name: 'Ignite App' // would you like to see your app's name?, + // safeRecursion: false // ADVANCED: default is true (turning off will bypass reactotron's safety checks for serialization) }) - // forward all errors to Reactotron - .use(trackGlobalErrors({ - // ignore all error frames from react-native (for example) - veto: (frame) => - frame.fileName.indexOf('/node_modules/react-native/') >= 0 - })) - - // register apisauce so we can install a monitor later - .use(apisaucePlugin()) - - // add overlay ability for graphics - .use(overlay()) - - // setup the redux integration with Reactotron - .use(reactotronRedux({ + // register all React Native features - with default settings + .useReactNative( + // { + // overlay: {}, + // errors: {}, + // asyncStorage: {}, + // networking: {}, + // editor: {} + // } + ) + + // register the Redux plugin -- checkout /App/Redux/CreateStore.js to see how it is used. + .use(reduxPlugin({ // you can flag some of your actions as important by returning true here - isActionImportant: action => action.type === StartupTypes.STARTUP, + // isActionImportant: action => action.type === StartupTypes.STARTUP, // you can flag to exclude certain types too... especially the chatty ones // except: ['EFFECT_TRIGGERED', 'EFFECT_RESOLVED', 'EFFECT_REJECTED', 'persist/REHYDRATE'], diff --git a/boilerplate/App/Services/Api.js b/boilerplate/App/Services/Api.js index df3f60a..fab9a49 100644 --- a/boilerplate/App/Services/Api.js +++ b/boilerplate/App/Services/Api.js @@ -20,13 +20,6 @@ const create = (baseURL = 'https://api.github.com/') => { timeout: 10000 }) - // Wrap api's addMonitor to allow the calling code to attach - // additional monitors in the future. But only in __DEV__ and only - // if we've attached Reactotron to console (it isn't during unit tests). - if (__DEV__ && console.tron) { - api.addMonitor(console.tron.apisauce) - } - // ------ // STEP 2 // ------ diff --git a/boilerplate/package.json.ejs b/boilerplate/package.json.ejs index 6098980..3efdd64 100644 --- a/boilerplate/package.json.ejs +++ b/boilerplate/package.json.ejs @@ -41,10 +41,9 @@ "husky": "^0.13.1", "react-addons-test-utils": "^15.3.1", "react-dom": "^15.4.0", - "reactotron-apisauce": "^1.7.0", - "reactotron-react-native": "^1.7.0", - "reactotron-redux": "^1.7.0", - "reactotron-redux-saga": "^1.7.0" + "reactotron-react-native": "^1.11.1", + "reactotron-redux": "^1.11.1", + "reactotron-redux-saga": "^1.11.1" }, "jest": { "testMatch": [ From 3fd40ae0e29a20f45012e2104098fe1884754612 Mon Sep 17 00:00:00 2001 From: Steve Kellock Date: Wed, 24 May 2017 23:39:17 -0400 Subject: [PATCH 3/3] Cleans up the Reactotron integration. --- boilerplate/App/Config/ReactotronConfig.js | 48 ++----------------- boilerplate/App/Containers/App.js | 7 +-- boilerplate/App/Redux/CreateStore.js | 2 +- .../App/Services/RehydrationServices.js | 21 ++++---- 4 files changed, 21 insertions(+), 57 deletions(-) diff --git a/boilerplate/App/Config/ReactotronConfig.js b/boilerplate/App/Config/ReactotronConfig.js index cab131b..dbc88b6 100644 --- a/boilerplate/App/Config/ReactotronConfig.js +++ b/boilerplate/App/Config/ReactotronConfig.js @@ -1,4 +1,3 @@ -// import { StartupTypes } from '../Redux/StartupRedux' import Config from '../Config/DebugConfig' import Immutable from 'seamless-immutable' import Reactotron from 'reactotron-react-native' @@ -6,42 +5,12 @@ import { reactotronRedux as reduxPlugin } from 'reactotron-redux' import sagaPlugin from 'reactotron-redux-saga' if (Config.useReactotron) { + // https://github.com/infinitered/reactotron for more options! Reactotron - // configure how & where to talk to the Desktop App - .configure({ - // host: '10.0.3.2' // default is localhost (on android don't forget to `adb reverse tcp:9090 tcp:9090`) - name: 'Ignite App' // would you like to see your app's name?, - // safeRecursion: false // ADVANCED: default is true (turning off will bypass reactotron's safety checks for serialization) - }) - - // register all React Native features - with default settings - .useReactNative( - // { - // overlay: {}, - // errors: {}, - // asyncStorage: {}, - // networking: {}, - // editor: {} - // } - ) - - // register the Redux plugin -- checkout /App/Redux/CreateStore.js to see how it is used. - .use(reduxPlugin({ - // you can flag some of your actions as important by returning true here - // isActionImportant: action => action.type === StartupTypes.STARTUP, - - // you can flag to exclude certain types too... especially the chatty ones - // except: ['EFFECT_TRIGGERED', 'EFFECT_RESOLVED', 'EFFECT_REJECTED', 'persist/REHYDRATE'], - - // Fires when Reactotron uploads a new copy of the state tree. Since our reducers are - // immutable with `seamless-immutable`, we ensure we convert to that format. - onRestore: state => Immutable(state) - })) - - // register the redux-saga plugin so we can use the monitor in CreateStore.js + .configure({ name: 'Ignite App' }) + .useReactNative() + .use(reduxPlugin({ onRestore: Immutable })) .use(sagaPlugin()) - - // let's connect! .connect() // Let's clear Reactotron on every time we load the app @@ -50,13 +19,4 @@ if (Config.useReactotron) { // Totally hacky, but this allows you to not both importing reactotron-react-native // on every file. This is just DEV mode, so no big deal. console.tron = Reactotron -} else { - // a mock version should you decide to leave console.tron in your codebase - console.tron = { - log: () => false, - warn: () => false, - error: () => false, - display: () => false, - image: () => false - } } diff --git a/boilerplate/App/Containers/App.js b/boilerplate/App/Containers/App.js index fe94120..a123eee 100644 --- a/boilerplate/App/Containers/App.js +++ b/boilerplate/App/Containers/App.js @@ -1,4 +1,5 @@ import '../Config' +import DebugConfig from '../Config/DebugConfig' import React, { Component } from 'react' import { Provider } from 'react-redux' import RootContainer from './RootContainer' @@ -27,6 +28,6 @@ class App extends Component { } // allow reactotron overlay for fast design in dev mode -const AppWithBenefits = __DEV__ ? console.tron.overlay(App) : App - -export default AppWithBenefits +export default DebugConfig.useReactotron + ? console.tron.overlay(App) + : App diff --git a/boilerplate/App/Redux/CreateStore.js b/boilerplate/App/Redux/CreateStore.js index 83a6f76..79bceb0 100644 --- a/boilerplate/App/Redux/CreateStore.js +++ b/boilerplate/App/Redux/CreateStore.js @@ -14,7 +14,7 @@ export default (rootReducer, rootSaga) => { /* ------------- Saga Middleware ------------- */ - const sagaMonitor = __DEV__ ? console.tron.createSagaMonitor() : null + const sagaMonitor = Config.useReactotron ? console.tron.createSagaMonitor() : null const sagaMiddleware = createSagaMiddleware({ sagaMonitor }) middleware.push(sagaMiddleware) diff --git a/boilerplate/App/Services/RehydrationServices.js b/boilerplate/App/Services/RehydrationServices.js index f0937f3..db2698d 100644 --- a/boilerplate/App/Services/RehydrationServices.js +++ b/boilerplate/App/Services/RehydrationServices.js @@ -2,6 +2,7 @@ import ReduxPersist from '../Config/ReduxPersist' import { AsyncStorage } from 'react-native' import { persistStore } from 'redux-persist' import StartupActions from '../Redux/StartupRedux' +import DebugConfig from '../Config/DebugConfig' const updateReducers = (store: Object) => { const reducerVersion = ReduxPersist.reducerVersion @@ -11,15 +12,17 @@ const updateReducers = (store: Object) => { // Check to ensure latest reducer version AsyncStorage.getItem('reducerVersion').then((localVersion) => { if (localVersion !== reducerVersion) { - console.tron.display({ - name: 'PURGE', - value: { - 'Old Version:': localVersion, - 'New Version:': reducerVersion - }, - preview: 'Reducer Version Change Detected', - important: true - }) + if (DebugConfig.useReactotron) { + console.tron.display({ + name: 'PURGE', + value: { + 'Old Version:': localVersion, + 'New Version:': reducerVersion + }, + preview: 'Reducer Version Change Detected', + important: true + }) + } // Purge store persistStore(store, config, startup).purge() AsyncStorage.setItem('reducerVersion', reducerVersion)