Reading the source code of debugger.html

Developer Tools
#1

I am a rookie here, so please excuse me if this sounds silly :stuck_out_tongue:

I’d like to read the source code of debugger.html because I feel it would help me understand web apps built with react and redux from the context of a real app, and so that I can more easily tackle harder issues in the issue list!

Where would you suggest I begin?

Should I start reading from src/components/main.js?

Or should it be actions & reducers driven?

Thanks :slight_smile:

#2

I think debugger may be a more complicated than small web apps so if you want to learn about react / redux applications I would recommend create-react-app first.

However in the debugger you’ll find these:

src/main.js shows how to “wire up” a React / Redux application. This is where you create the store and mount the application DOM etc.

src/components/ are all the React components

src/selectors.js contains all the Redux selectors

src/reducers/ contains all the Redux reducers

src/actions/ contains all the Redux actions

I would start with the components and reducers / actions.

1 Like
#3

If it helps, I started with getting to know the layout and component tree. Overall, the structure isn’t that complicated to wrap your head around if you don’t dive too deeply into what each component does.

Another insight which help (generally in redux apps) is to distinguish between components that are connected to the store, and ones that are not (“smart vs. dumb”). You can spot the connected ones by looking at the end of the file and seeing
connect((state, props) => ...

then I continued to actions, reducers and selectors.
Good luck!

1 Like
#4

Thanks @clarkbw @amitzur :slight_smile: