Anatomy of a React Application — Architect with Sagas

Here’s a list of my best web development tutorials.

Complete CSS flex tutorial on Hashnode.

Ultimate CSS grid tutorial on Hashnode.

Higher-order functions .map, .filter & .reduce on Hashnode.

Follow me @ Twitter, Instagram & fb to never miss premium articles.

To get a good idea of how flex works try flex layout editor on this page.

1. There is a difference between knowing and understanding. Always learn from multiple sources. Sift out accurate facts.

2. Meet me on Twitter @js_tut for JavaScript tutorial galore or follow me on GitHub, if interested. I follow back :-)

3. You can find my react.js book on Amazon here. Support is appreciated. -jst

Well it may or may not be you. This is just a wild guess but…

Chances are you are not learning at your optimal pace. You are probably distracted with life – things you want to do. But you are not learning.

Because learning is time consuming and learning new things is hard; it involves a large amount of brain tissue.

That’s okay. At least, as far as React Saga architecture goes, I did all the homework for you. No. This may not be a fully 100% accurate picture and I am sure genetic variations of this dinosaur exist… but… it brings up some important elements of the structure, useful to those who are coming to Sagas for the first time.

Image for post
Image for post

This diagram is the result of my work at Goodyear tire company where I am currently Sr. React Developer. It was and still is a great experience… I learned a lot. So I jotted it down in Photoshop to share it with you.

Outside of component constructor and some special “Lifecycle” component methods you never want to modify state of your React component by directly assigning values to its properties. Instead there are actions.

The diagram depicts an application structure with async-based actions triggered via sagas. You know actions, right? In React we never change state manually. We trigger change by dispatching actions.

Sagas gives us a chance to dispatch them using EcmaScript 6 async. This means your HTTP requests will not clutter up execution flow.

This visual diagram should answer many questions you had about React by building a mental picture in your head of the entire architecture.

Of course it is not the only way to build React applications. And the diagram is intentionally skipping detail to get a better overall idea of architecture. But it’s a good one. Together with material-ui it is very efficient.

What’s next? You can follow me on GitHub — I follow back!

Are you learning React from scratch? If so…

Grab a copy of my React Book — here

Just a quick note… I am currently working on my next React book. The one in this link is pretty basic. Only get it if you are starting from scratch.

Published by < Learning Curve >

Nobody loves writing documentation. . . . . .the way we do.

It’s been a while since I’ve written for Medium. If you want to write valuable and authentic content you better research and absorb first. It takes up to two weeks on my average to fully grasp a new subject.

Written by

Issues. Every webdev has them. Published author of CSS Visual Dictionary few others…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store