文档结构  
翻译进度:已翻译     翻译赏金:0 元 (?)    ¥ 我要打赏

Reactotron

控制,监视和用仪器装备您的React DOM和React本机应用程序。 从你的TTY的舒适度开始。

Demo

Version 0.6.0

支持平台

伟大的地方

  • 将日志命令作为文本或对象发送
  • 中继转发所有redbox错误和yellowbox警告
  • 观察他们被派遣时的行为流程
  • 跟踪观察热点的每个行为的性能
  • 像数据库一样查询全局状态
  • 订阅您的状态中的值,并在更改时通知您
  • 调度您的自定义操作
  • 观察您对服务器的HTTP调用并跟踪计时
第 1 段(可获 2 积分)

要求

  • Node 4.x+
  • 痴迷于对所有事物的控制

安装

npm install reactotron --save-dev

运行服务器

node_modules/.bin/reactotron

 或许可以为其创建一个别名或将其添加到你的package.json的脚本部分。

如何使用

 想要使用这个,你需要添加几行代码到你的应用程序。

取决于你想需要什么样的支持,这里有一些不同的地方可以供你拦截。

入口(必选项)

提供
  • 将日志命令作为文本或对象发送
  • 中继转发所有redbox错误和yellowbox警告

Hello!

如何拦截

如果你有index.ios.js或index.android.js,你可以把这段代码放在靠近顶部的地方:

第 2 段(可获 2 积分)
import Reactotron from 'reactotron'

// connect with defaults
Reactotron.connect()

// Connect with options

const options = {
  name: 'React Web', // Display name of the client
  server: 'localhost', // IP of the server to connect to
  port: 3334, // Port of the server to connect to (default: 3334)
  enabled: true // Whether or not Reactotron should be enabled.
}

Reactotron.connect(options)

我建议在React Native使用下面的连接,以便发布版本将禁用reactotron。

Reactotron.connect({enabled: __DEV__})
第 3 段(可获 2 积分)
确保connect()在第一时间触发

很重要的一点是,你的 Reactotron.connect() 要在redux存储创建之前触发。尤其是在你使用 {enabled: false} 选项的时候。

为了实现这一点,您可以创建一个 ReactotronConfig.js 文件,并将其作为优先导入项 import 到你应用程序的入口。 你可以 在examples 结构下签出3个项目的源代码,在action中你会看到。

Redux 中间件(可选项)

Hello!

提供
  • 观察他们被派遣时的行为流程
  • 跟踪观察热点的每个行为的性能
钩子拦截
// wherever you create your Redux store, add the Reactotron middleware:

import Reactotron from 'reactotron'

const store = createStore(
  rootReducer,
  applyMiddleware(
    logger,
    Reactotron.reduxMiddleware // <--- here i am!
  )
)

// Or you can use the Reactotron storeEnhancer!

const enhancer = compose(
  // If you have other enhancers..
  Reactotron.storeEnhancer()
)

const store = createStore(
  rootReducer,
  initialState,
  enhancer
)
第 4 段(可获 2 积分)

Redux 存储(可选项)

Hello!

提供
  • 像数据库一样查询全局状态
  • 订阅您的状态中的值,并在更改时通知您
  • 调度您的自定义操作
如果拦截
// wherever you create your Redux store
import Reactotron from 'reactotron'

const store = createStore(...)  // however you create your store
Reactotron.addReduxStore(store) // <--- here i am!

// If you're using the Reactotron.storeEnhance(), it's already
// setup for you!

API 跟踪(可选)

Hello!

提供
  • 观察您对服务器的HTTP调用并跟踪计时
  • 目前支持 apisauce
第 5 段(可获 2 积分)
如何拦截
// wherever you create your API
import Reactotron from 'reactotron'

// with your existing api object, add a monitor
api.addMonitor(Reactotron.apiLog)

其他功能

日志

调用Reactotron.log()函数并传递一个字符串或对象让其记录。支持表情包。

bench 函数

你可以使用Reactotron来进行非学术的基准测试。

  const bench = Reactotron.bench('Here I Go')
  bench.stop()

如果您正在计算序列,您还可以记录步骤。

  const bench = Reactotron.bench('Lets Go')
  bench.step('After long operation')
  bench.step('After one more thing')
  bench.stop()
第 6 段(可获 2 积分)

提示

在设备上使用

当你初始化 reactotron 时,你可以告诉它连接时的服务器ip地址:

Reactotron.connect({server: '10.0.1.109'})

有用的快捷键

您可以通过按下backspace / delete键删除reactotron ,或者通过按“ - ”键插入分隔符。

对于某些命令,例如分派动作,你可以通过按“.”键重复前面的命令。

参与

欢迎宣传和投递错误报告!

你想要开始扩展它么?

运行控制台程序

cd src
npm install
npm start

选择一个示例应用程序并运行它

cd examples/ReactNativeExample
npm install
cp ../../src/client/client.js .
react-native run-ios
第 7 段(可获 2 积分)

然后等待。等待。开始、开始然后结束。

请务必阅读examples/README.md文件以获取更多详细信息。

心愿清单

  • 获取正确的词汇(目前一切都是“command”)
  • 重构客户端以组织命令
  • 允许在客户端和服务器上扩展命令
  • 为项目特定的事情允许一个.reactotron子文件夹
  • 路由器还需要存在吗?
  • Api大小度量
  • 记录日志的页面
  • 显示配置文件显示的内容
  • 跟踪saga effect链
  • 提供一种方法来驱动导航器
  • 允许写入发送命令的简单脚本
  • 处理多个应用程序连接的策略
第 8 段(可获 2 积分)

随机图片

Hello!

Hello!

Hello!

特别鸣谢

为我在 Infinite Red的伙伴欢呼,鼓励这种方式的开源黑客和他们的分享。

此外,也很感谢 Kevin VanGelder, ,是他提出创建这个库的想法,说:“嘿,你知道这么做将会很酷吗?”,回答是,我们应该这样做。

第 9 段(可获 2 积分)

文章评论