Debugging React Native

GitHub

步驟

1.安裝

$ brew update && brew cask install react-native-debugger

2.使用

為了能使用 下圖紅色框部分(Redux Dev) 需要再code內加入

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

ps.可以在console中打印出asyncStorage

> const AsyncStorage = require(‘AsyncStorage')
> showAsyncStorageContentInDev()

Sample From cheerazar github

store.js

import { createStore } from 'redux';
import reducers from '../reducers';
export default createStore(
reducers,
// eslint-disable-next-line no-underscore-dangle
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
);

App.js (counter is a component)

import React from 'react';
import { Provider } from 'react-redux';
import store from './config/store';
import Counter from './Counter';

const App = () => (
<Provider store={store}>
<Counter />
</Provider>
);

export default App;

Another sample

store.js

import { createStore, combineReducers, applyMiddleware} from 'redux'
import { createLogger } from 'redux-logger'
import thunk from 'redux-thunk'
import reducers from './reducers'

const logger = createLogger();
const createStoreWithMiddleware = applyMiddleware(logger, thunk)(createStore);
const store = createStoreWithMiddleware(combineReducers(reducers),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),);
export default store;

App.js

import React, {Component} from 'react'
import {NativeModules, Platform} from 'react-native'
import {Provider} from 'react-redux'
import store from './store'
export default class App extends Component {
render() {
return (
<Provider store={store} >
<AppNavigation />
</Provider>
);
}
}

參考

• getting started#Use Redux DevTools Extension API

• redux-devtools-extension#usage by zalmoxisus

• Debugging React Native and Redux with React Native Debugger

• redux-devtools-extension -zalmoxisus Chrome Extension