react native debugger 遠程調試redux工具

react native是現在比較火的App開發技術。使用react native開發的朋友一般也會使用到facebook提出的Flux概念框架，而redux框架是使用的比較多的。

redux的一大原則是單一數據源，只存在唯一的state樹，以前由於工具的缺失，react native查看不了state，剛使用redux的時候按照文檔安裝了chrome擴展，

也查看不了state樹，每次都要自己打印出來看，比較麻煩。想來都說的是web的工具，今天找到了react-native的工具，可以遠程調試redux。

使用的 remote-redux-devtools-on-debugger 這個工具實現的。

首先，按照官方的文檔安裝依賴

npm install --save-dev remote-redux-devtools
npm install --save-dev remote-redux-devtools-on-debugger

然后，在項目的package.json里加入腳本命令

"scripts": {
  "postinstall": "remotedev-debugger --hostname localhost --port 5678 --injectserver"
}

remotedev-debugger命令參數請查看官方文檔

加完腳本命令執行

npm run postinstall

會替換掉./node_modules/react-native/local-cli/server/util/debugger.html

如果升級或者降級react-native，需要執行上面的命令替換遠程調試頁面

再然后修改store配置文件添加與遠程工具的通訊，一般為configureStore.js

import { Platform } from 'react-native';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import devTools from 'remote-redux-devtools';
import reducer from '../reducers';

export default function configureStore(initialState) {
  const enhancer = compose(
    applyMiddleware(thunk),
    devTools({
      name: Platform.OS,
      hostname: 'localhost',
      port: 5678
    })
  );
  return createStore(reducer, initialState, enhancer);
}

最后，react-native start啟動服務，在App的調試菜單里點擊Debug JS打開調試界面或者手動在chrome里輸入調試界面的網址

啟動js server服務的時候會啟動redux調試服務

注意：

remotedev-debugger的地址，按照官方的文檔說的是如果是在真機上使用，地址需要是ip地址(未測試)
我因為是手機的系統是安卓5.0，使用adb轉發就行
adb reverse tcp:5678 tcp:5678
端口改成你配置的端口