Redux调试
1. reactotron
redux的调试，除了最基本的打断点进去调试之外，还有一个好用的调试工具reactotron，它能够帮你清楚的记录你所发出的action，以及http请求，可以帮你更好的分析redux的结构。
下面说一下简单的配置
-
package.json中的添加
devDependencies: {
"reactotron-apisauce": "^1.11.1",
"reactotron-react-native": "^1.11.1",
"reactotron-redux": "^1.11.2",
"reactotron-redux-saga": "^1.11.1"
}
- 修改
store.js文件
import Reactotron from 'reactotron-react-native';
import { composeWithDevTools } from 'redux-devtools-extension';
import '../ReactotronConfig';
const sagaMiddleware = createSagaMiddleware({
sagaMonitor: Reactotron.createSagaMonitor(),
});
const store = Reactotron.createStore(
xxReducer,
composeWithDevTools(middleware),
);
-
ReactotronConfig.js文件
import Reactotron, { networking } from 'reactotron-react-native';
import { reactotronRedux as reduxPlugin } from 'reactotron-redux';
import sagaPlugin from 'reactotron-redux-saga';
/* eslint no-console:0 */
console.disableYellowBox = true;
Reactotron.configure({ name: 'ReactNativeSinooa' }); // controls connection & communication settings
Reactotron.useReactNative(); // add all built-in react native plugins
Reactotron.use(reduxPlugin());
Reactotron.use(sagaPlugin());
Reactotron.use(networking());
// if we're running in DEV mode, then let's connect!
/* eslint no-undef:0 */
if (__DEV__) {
Reactotron.connect();
Reactotron.clear();
}
2. redux-devtools-extension
redux-devtools-extension这个调试工具我用的比较少些，不过也是查看redux很好用的工具。
这个主要是可以在chrome浏览器的控制台中来查看。
redux-devtools
install
可以直接从 Chrome Web Store来安装，这样方便许多。
3. remote-redux-devtools
这个我用的比较少，就不做详细介绍，可以去官网细看。
DOM结构查看
可以查看dom结构的react devtools。
只需要在index.ios.js和index.android.js文件中引入import 'react-devtools';即可。
import 'react-devtools'; // 引入，需要执行`yarn add react-devtools `
import { AppRegistry } from 'react-native';
import APP from './src/APP';
AppRegistry.registerComponent('workflow', () => APP);
然后在
//package.json中添加` "devtools": "react-devtools"`
类似下面这样
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"devtools": "react-devtools"
},
然后在命令行执行yarn run devtools即可。
配合ios模拟器可以方便进行查找dom元素。
QQ20170915-140436@2x.png
写在后面
GitHub上集大家之力搞了一个前端面试题的项目，里面都是大家面试时所遇到的题以及一些学习资料，有兴趣的话可以关注一下。如果你也有兴趣加入我们的话，请在项目中留言。项目同时也可以在gitbook上查看。
