Member-only story
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.

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.