It’s All About NGRX
So first of all, if you haven’t read my previous article 3w’s with NGRX, Please read it.Now if you are here I’ll assume that you know what NGRX is.
Content
· What is Action?
· What is Reducer?
· What is Effect?
· What is Selector?
I know NGRX is little bit complex but don’t be afraid… Why? You’ll see it.
What is Action?
I don’t need to answer this. You already know about it.
And…Believe me, we are done with the part of action. Yeah! Action is nothing but an act.
How? Let me explain… So action in NGRX is nothing but an event or an act that we trigger or Dispatch (NGRX Term) and on the other side someone is listening to that action. Who? We’ll discuss about it later but whenever we want to perform something with store we need action/event to notify our store that “Hey Store! Something has been changed” or “Hey Store! I want some data” And this is how our component usually talk with Store.
Now the Question comes who’ll ask this question with store, Action is just an event someone should be there to listen this questions.
What is Reducer?
So last question was…Who’ll listen to an action? Reducer will listen it.
Reducers specify how the application’s state changes in response to actions sent to the store. Remember that actions only describe what happened, but don’t describe how the application’s state changes — source https://redux.js.org/
Big words? Let’s simplify…
So we’ll understand only what we want to and hence, simple terms Reducers are some functions or Action listeners that only has the privilege to access the store
Reducer will listen to an action and will perform the action with the store. It may be addition, deletion, updating or anything. Reducer has an ability called adapter and that adapter can be used to perform this actions, like.
· Updateone
· AddMany
· Addone
· Removeone
And some others… we will talk about this in later articles
Now we are done with the store part, User added some data, action got dispatched, and reducer listened it and updated the store… now let’s refresh the page… What? It is old state back? Now we need some concept or middle ware to make a sync between store and backend API’s so that we can also notify the backend about the latest changes. Aghhhh!! Confusion again
Let’s simplify…
What is Effect?
If you’ll compare the previous image with effect flow. We just introduced new term called EFFECT.
Effect: The change on the server and response to the client is a side effect. … Ngrx/effects is middleware for handling side effects in ngrx/store. It listens for dispatched actions in an observable stream, performs side effects, and returns new actions either immediately or asynchronously
Now effect will also listen to action and will ask the backend to update the database. Which will create a sync between store and backend and yep we are done with the state management now.
What is Selector?
Selector is nothing but an add-on in NGRX package. Which save your live with already written codes. Selectors are basically the way to filter and retrieve a piece of data from the application state
Like:
· selectIds
· selectEntities
· selectAll
· selectTotal
We can directly call these selector and get data. Apart from this we can also create our custom selector like getdatabyuserId etc
I hope you’ll like my article. Please appraise me with your feedback.
