The Anatomy Of A React Redux App

If you inspect the source of a React Redux app, it could be overwhelming. But there is a method to the madness and it becomes very simple once you understand what’s going on.

To understand it better, we need to install React Developer Tools Chrome extension to Chrome browser and inspect it from within that tool.

Note: This is different from Redux DevTools which is helpful for debugging Redux’ “States” and “Actions” but won’t help to understand the “anatomy”.

Once installed, React Developer tools shows up inside Chrome’s JS Debugger as a tab called “React”. You simply need to open a React application and open this “React” tab to use the tool.

Anatomy: 6 Types Of Components

Now, if you inspect using React Developer Tools, you’ll realize that in a typical multi-view SPA React Redux app, we can categorize components into at least 6 different types based on their “purpose”.

Let’s explore each of them one by one.

The Example App

In this blog I’ll go over the component tree or the anatomy of the first page of React Redux blog post app(live app) that I’ve been using for all my blogs.

Source code: https://github.com/rajaraodv/react-redux-blog

Live App: https://protected-escarpment-79486.herokuapp.com/

Twitter: https://twitter.com/rajaraodv (@rajaraodv)

If we draw a border against every component we code and makes up the first page(PostList) of the blog post app, it will look like below:

Note: You can click on the picture to zoom and read

Legend:

Let’s look at each type of component one-by-one.

1. “Provider” Component

ReactDOM.render(
<Provider store={store}>
<Router history={browserHistory} routes={routes} />
</Provider>
, document.getElementById(‘body’));

2. “Router” And “RouterContext” Component

<Router history={browserHistory} routes={routes} />

3. “Parent” Route Component

//Routes..
export default (
<Route path=”/” component={App}> <-- "Parent" Route component
<IndexRoute component={PostsIndex} /> <-- default child Route
<Route path=”posts/new” component={PostsNew} /> <-- Child Routes
<Route path=”posts/:id” component={PostsShow} />
...
</Route>
);

For example: In our app, if the route is “/”, the Router renders “App” and then “PostIndex” as “App’s” child. Similarly, if the route is: “/posts/new”, the router renders “App” and then “PostsNew” as App’s child.

export default class App extends Component {
render() {
return (
<AppContainer>
{this.props.children} <-- Render Child Views/Pages
</AppContainer>
);
}
}

4. “Pages” or “View” level Components

//Routes..
export default (
<Route path=”/” component={App}> <-- "Parent" Route component
<IndexRoute component={PostsIndex} /> <-- default child Route
<Route path=”posts/new” component={PostsNew} /> <-- Child Routes
<Route path=”posts/:id” component={PostsShow} />
...
</Route>
);

Example: PageIndex Page component

class PostsIndex extends Component {
render() {
return (
<div>
<HeaderContainer type=”posts_index”/>
<ValidateEmailAlertContainer/>
<PostsList />
</div>
);
}
}

5. “Container” Components

Note: “Presentational” components are responsible for actually rendering HTML and then listening to user and server events but they delegate all the work to “Container” components.

6. “Presentational” Components

Note: Any component that doesn’t deal with JS and simply renders something is called “Presentational” component. It doesn’t necessarily have to have a parent “Container” component.

That’s it!

🎉🎉🎉 If you like this post, please ❤❤❤ it below on Medium and share it to help spread the word on Twitter 🎉🎉🎉

My Other Blogs

ES6

WebPack

Draft.js

React And Redux :

Salesforce

Trying to make Web development simple. Former Developer Advocate @Salesforce, VMware (node.js); Engineer @ Yahoo, Zimbra. Twitter: @rajaraodv

Trying to make Web development simple. Former Developer Advocate @Salesforce, VMware (node.js); Engineer @ Yahoo, Zimbra. Twitter: @rajaraodv