# Debugging React Native

[GitHub](https://github.com/jhen0409/react-native-debugger)

### 步驟

1.安裝

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

\
2.使用

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

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
```

![](https://bambooooo.gitbooks.io/react-native/content/React%20Native/images/tools/debugging1.png)

\
ps.可以在console中打印出asyncStorage

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

![](https://bambooooo.gitbooks.io/react-native/content/React%20Native/images/tools/debugging2.png)

<br>

### Sample From [cheerazar github](https://github.com/Cheerazar/react-native-debugger-with-redux)

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;
```

<br>

### 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](https://github.com/jhen0409/react-native-debugger/blob/master/docs/getting-started.md#use-redux-devtools-extension-api)
* [redux-devtools-extension#usage by zalmoxisus](https://github.com/zalmoxisus/redux-devtools-extension#usage)
* [Debugging React Native and Redux with React Native Debugger](https://blog.reactnativecoach.com/debugging-react-native-and-redux-with-react-native-debugger-62f6ceef3033)
* [redux-devtools-extension](https://github.com/zalmoxisus/redux-devtools-extension#11-basic-store) -zalmoxisus Chrome Extension