React Native 远程调试，支持 Redux

[diamont1001]

React Native 项目中添加远程调试支持

步骤1：下载调试器 react-native-redux-devtools

步骤2：项目安装依赖

npm install @redux-devtools/extension @redux-devtools/remote

步骤3：修改 Redux Store 创建代码，例子如下

import {legacy_createStore as createStore, applyMiddleware} from 'redux'
import thunkMiddleware from 'redux-thunk'
import rootReducer from '../reducers/index'
import { composeWithDevTools } from '@redux-devtools/extension';

const composeEnhancers = composeWithDevTools({
  realtime: (process.env.NODE_ENV === 'development'),
  port: 8081 // 调试器默认是 8081 端口，也可以修改
})

const middlewares = [thunkMiddleware];

// if (process.env.NODE_ENV === 'development') {
//   middlewares.push(require('redux-logger').createLogger());
// }

const enhancer = composeEnhancers(
  applyMiddleware(...middlewares),
  // other store enhancers if any
);

export default function configureStore() {
  const store = createStore(rootReducer, enhancer);
  return store;
}

调试器 React Native Debugger 的使用

步骤1：打开项目 Debug 功能

通过 Metro 命令行 d 打开手机上的 Debug

步骤2：打开 React Native Debuger 软件，重载一下项目JS

打开后，Metro 命令行通过 r 命令重载一下 JS 即可。

打开网络调试

React Native Debuger 默认是不打开网络调试的，需要在配置里打开：

搜索 network，把 defaultNetworkInspect 置为 true，重启软件即可。