Chrome Extensions for React and Redux
While most new React features are being developed, they are completely hidden from customers, but we still have a way to interact with the new React code as it is loaded like other JS bundles.
React Developer Tools
To be able to view the React component tree in the Chrome console, please install React dev tools Docs
You will then have a “React” tab in your chrome developer tools.
If you click on this, and open the console (Esc) at the same time, you’ll have access to the store provider
in there, through a variable named $r
.
Then, you can get the store state with $r.store.getState()
, and dispatch actions with r.store.dispatch(<< ACTION OBJECT >>);
Right now, as we develop a component, you can show it once the page has loaded with: r.store.dispatch({ type: 'APP_SHOW_SIDE_SLIDER'});
Redux DevTools
While the React developer tools give you access to the store, it’s cumbersome to inspect the current store state and dispatch actions. There is an easier way, with another extension: Redux DevTools
The front-end code is already configured to use it if it’s installed in your browser, so all you have to do is install the browser extension.
Again, you’ll have a new tab named “Redux” in your Chrome Developer Tools.
From there, you can inspect the current state (‘state’ tab, top right), see all the actions that have been dispatched (list on the left when using the ‘inspector’), see the content of a selected action in this list (select action in list, then select the ‘Action’ tab, top right), or dispatch a new action from the textArea at the bottom.
Like with the React Developer Tools, you need to use APP_SHOW_SIDE_SLIDER
as an action type, so you would enter the following in the textArea and hit ‘dispatch’ at the bottom right:
```
{
TYPE: 'APP_SHOW_SIDE_SLIDER'
}
```