Skip to content

Commit

Permalink
docs(DevTools): add explanation on how to use Redux DevTools extension
Browse files Browse the repository at this point in the history
  • Loading branch information
pac-guerreiro committed Aug 1, 2023
1 parent a2060cb commit b080b88
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 0 deletions.
1 change: 1 addition & 0 deletions API.md
Original file line number Diff line number Diff line change
Expand Up @@ -319,6 +319,7 @@ Initialize the store with actions and listening for storage events
| [options.captureMetrics] | <code>Boolean</code> | | Enables Onyx benchmarking and exposes the get/print/reset functions |
| [options.shouldSyncMultipleInstances] | <code>Boolean</code> | | Auto synchronize storage events between multiple instances of Onyx running in different tabs/windows. Defaults to true for platforms that support local storage (web/desktop) |
| [options.debugSetState] | <code>Boolean</code> | | Enables debugging setState() calls to connected components. |
| [options.enableDevTools] | <code>Boolean</code> | | Enables debugging using Redux DevTools extension. |

**Example**
```js
Expand Down
10 changes: 10 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -321,8 +321,18 @@ Sample output of `Onyx.printMetrics()`

# Debug mode

## Using debugSetState

It can be useful to log why Onyx is calling `setState()` on a particular React component so that we can understand which key changed, what changed about the value, and the connected component that ultimately rendered as a result. When used correctly this can help isolate problem areas and unnecessary renders in the code. To enable this feature, pass `debugSetState: true` to the config and grep JS console logs for `[Onyx-Debug]`.

## Using Redux DevTools extension

It can be useful to check the order of writes to the storage and it's state at a specific point in time.

First, install Redux DevTools through your favorite browser ([Edge](https://microsoftedge.microsoft.com/addons/detail/redux-devtools/nnkgneoiohoecpdiaponcejilbhhikei), [Chrome](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/reduxdevtools/))

Then, you can enable this type of debugging by passing `enableDevTools: true` to `Onyx.init({...})`.

# Development

`react-native` bundles source using the `metro` bundler. `metro` does not follow symlinks, so we can't use `npm link` to
Expand Down

0 comments on commit b080b88

Please sign in to comment.