An Interest In:
Web News this Week
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
Angular-NGRX state management lifecycle simplified
Introduction
NGRX makes Angular development easier by simplifying the application's state in objects and enforcing unidirectional data flow.
What is Redux!
If you are new to NGRX, understanding Redux pattern is a must to make any progress. And this is where most of the learners feel confused.
Let's keep this simple and straight to the point. Redux pattern is something you see in your day to day life.
I know what you might be thinking at this point... What are you talking about?
Relax! and consider your favorite restaurant system that takes orders and delivers food.
Step1
- At the convenience of home, people can order food by calling restaurant workers.
Step2
- Restaurant workers notes down your order and then hands it off to chef.
- They also get groceries if needed for the order.
Step3
- Chef cooks the orders and places them in the store display.
Step4
- The delivery man picks up respective orders from store and delivers it to people like you.
Notice that during all these steps, all you have done is just requesting which item you want. Everything else is within its eco system and each member has specific job to do.
NGRX STATE MANAGEMENT CYCLE
Alright, now lets try to relate this example to NGRX state management lifecycle which uses redux pattern.
Try to relate both images
People = Components Food = State Workers = Actions Grocery store = Effects Farms = Services and Database Chef = Reducer Store = Store Delivery men = Selectors
Step1
- Components dispatch actions.
eg: Get me all employee names.
Step2
- Actions hold these unique events.
eg: All employee info requested.
Step3
- Reducers are just pure functions that handle actions to update store from one state to next state.
eg: Okay, so you need all employee info. I have updated store with all employee info.
Notice that if you have some side activities that needs to be done, like getting data from backend, this is where Effects comes into the picture.
Step4
- Selectors are just pure functions used to obtain data from store.
eg Takes employee info from store and hands off to component.
Conclusion
At first NGRX might appear confusing and overwhelming, but the concept behind is very simple and once you get it, you will never forget it. I have take restaurant example just for beginners understanding and it might not fit in all scenarios of NGRX. This just starting point to get an idea. I would recommend to read NGRX docs.
Original Link: https://dev.to/jagadeeshmusali/angular-ngrx-state-management-lifecycle-simplified-khl
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To