infinitered / infinitered/reactotron
I am not being to connect to the Reactotron. Using MST
- Dominant language
- TypeScript
- Stars
- 15.6k
- Forks
- 972
- PR merge metrics
- No merged PRs in 30d
Description
**Reactotron-config.ts**
`export interface ReactotronConfig {
name?: string
host?: string
useAsyncStorage?: boolean
clearOnLoad?: boolean
state?: {
initial?: boolean
snapshots?: boolean
}
}
`
`export const DEFAULT_REACTOTRON_CONFIG: ReactotronConfig = {
clearOnLoad: true,
host: "92.168.0.136",
useAsyncStorage: true,
state: {
initial: true,
snapshots: false,
},
}`
**Reactotron.ts** with Mobex state tree
`import Tron from "reactotron-react-native"
import AsyncStorage from "@react-native-community/async-storage"
import { RootStore } from "../../models/root-store/root-store"
import { onSnapshot } from "mobx-state-tree"
import { ReactotronConfig, DEFAULT_REACTOTRON_CONFIG } from "./reactotron-config"
import { mst } from "reactotron-mst"
import { clear } from "../../utils/storage"`
`declare global {
interface Console {
tron: typeof Tron
}
}`
`const noop = () => undefined`
`if (__DEV__) {
console.tron = Tron
} else {
console.tron = {
benchmark: noop,
clear: noop,
close: noop,
configure: noop,
connect: noop,
display: noop,
error: noop,
image: noop,
log: noop,
logImportant: noop,
onCustomCommand: noop,
overlay: noop,
reportError: noop,
send: noop,
startTimer: noop,
storybookSwitcher: noop,
use: noop,
useReactNative: noop,
warn: noop,
}
}`
`export class Reactotron {
config: ReactotronConfig
rootStore: any
constructor(config: ReactotronConfig = DEFAULT_REACTOTRON_CONFIG) {
this.config = {
host: "localhost",
useAsyncStorage: true,
...config,
state: {
initial: false,
snapshots: false,
...(config && config.state),
},
}
}`
` setRootStore(rootStore: any, initialData: any) {
if (__DEV__) {
rootStore = rootStore as RootStore // typescript hack
this.rootStore = rootStore
const { initial, snapshots } = this.config.state
const name = "ROOT STORE"
if (initial) {
console.tron.display({ name, value: initialData, preview: "Initial State" })
}
if (snapshots) {
onSnapshot(rootStore, snapshot => {
console.tron.display({ name, value: snapshot, preview: "New State" })
})
}
// @ts-ignore
console.tron.trackMstNode(rootStore)
}
}`
Contributor guide
Research direction
Start with Reactotron-config.ts and Reactotron.ts, focusing on the configured host and the setRootStore connection setup. Reproduce the React Native app using MobX-State-Tree, then verify that Reactotron connects and displays the initial or snapshot state when enabled.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- devtools
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100