I know what is State Management, Pure / Impure Functions, Immutable / Mutable data structures and all concepts of State, Reduce etc....
Can anyone explain Why we need Application State Management ? Or the basic problem / motive behind introducing State Management without using technical terms in layman language.
The fact that you're asking this question means that the answer is no, you do not need application state management. I don't mean that in a rude way, but even Dan Abramov (the creator of Redux) thinks that you might not need Redux. Basically, if you don't come across the pain point the Redux solves, then don't use it.
Having said that, I've used Redux (please note I'm not an expert at it) and I find it useful for the following reasons:
There are other reasons that Dan points out in his article, but for me I think it makes sense simply from an organizational sense. Having everything also separated out and very "strict" means that there's less room for error, which is crucial for large teams working on a large app. However, Redux doesn't tell you how to write your app. I am able to reduce a lot of boilerplate by using redux-actions, so my entire state is kept in a single file instead of having my constants, actions, and reducers all over the place.
To re-iterate my initial point though: if you don't think that you need it, you probably don't. Chances are you're not building a Facebook so your app will do just fine with local state or whatever you're currently doing.
It's very simple: you need a way to safely share state between different components. When you are using the component's native state, your view will re-render upon every call to setState() and thus will reflect your changes. But if you have a service (or store, name it as you wish) that holds your shared state, who will update all the views when that state changes?
So it all start and end with making your views reactive to changes in a shared state.
One way to tackle this problem is passing the shared state from the root of your app to your children via props. But this could be cumbersome if you have a complex and deep nested hierarchy.
Another way is to use Redux, but in my opinion Redux is wayyyy over-kill for this simple task.
I'v created what I think to be the most simple, clean and straight-forward state management library out there :
Speacking of Flux/Redux: Flux is a concept how to handle data across components and how to store them, since at least in React it is not directly specified; it just handles the front end. You can pass data to your child components and that's it and in complex application you end up passing data across multiple layers of components.
And with Flux/Redux now you don't have to pass data across multiple layers of components, since they can pull it off the store itself. That's makes the components much smaller and cleaner, they don't have to pass data only for passing and do nothing more of with it.
That's kind of TLDR but that's how it's started. And now Redux is Framework agnostic, so you can use it with other Frameworks and apply the (unidirectional) data flow to it, despite of the may existing features.
I used it with angularJS (kind of bulky) and with vuex there is also a vue.js implementation.
Philip Davis
Software developer
You won't have felt a need for it in Angular because Angular is a complete framework for SPA development. React is only a view layer, which is why you almost always see it paired with something else (e.g. React/Flux, React/Redux, React/MobX, etc).