infinitered / infinitered/reactotron

I am not being to connect to the Reactotron. Using MST

Open
#1,201 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.