Last updated on April 4, 2020
This blog is the continuation from my previous post and here I would like to share about the building blocks of State Management.
Introduction
I thought to write this conceptual design of State Management as easy as possible in order to easily pick it up and incorporate this within your apps.
As we know this state management principle helps to write and maintain the data in a single object and in a single place.
Thus we are easily able to detect the object data changes from the granular way.
Building Blocks of State Management
The whole idea of this principle is that “Single Object”.
Yes. To maintain and keep data in sync with the help of JavaScript Object.
We have Store, Action, Reducer, Middlewares as the building blocks of the State Management.
Store
This is the main fundamentals of State Management principle and it’s acting as a container.
To keep the data that you got it from HTTP Request or local data that you would categorise it by features.
Each property from Javascript will act as individual feature and whenever it’s needed this property would be queried at that moment.
Action
Ultimate idea of State Management principle is that you cannot change the state directly.
Whereas by dispatching an action this would happen and it promotes the One Directional Data flow.
Reducer
This is nothing but a plain function.
Once the respective action gets dispatched then that comes to a Reducer function.
Based on the action type, the Reducer function calls for updating the State object.
Middlewares
This is a bit of an advanced level to State Management principle.
If you want to tweak request pipeline in terms of customising based on your requirement then this would help you a lot.
Let’s say you can create your own logging Middleware that keeps tracking state changes.