Angular Redux - NgRx Angular, NgRx store, NgRx Effects, NgRx selectors

in this video you will learn why do you need ngrx inside angular and how you can bind it to your angular application and the first and most important question here is what is ngrx and as you can see here i opened official ngrix website but from my point of view it is not exactly clear here why do we need ngrx at all and what problem it solve so to understand why do you need ngrx you must understand the concept of redux and actually redux means that this is a state management for a single flow of data so we have our state then our component can dispatch an action then our action can change our state and all our components are subscribed to our state to apply some changes to our components if you don't know and understand redux it doesn't make any sense for you to watch this video to master ngrix you first need to understand the concepts of redux and actually ngrix is simply an implementation of redux inside angular so what do we typically want to do with ngrix first of all we have a global state we can apply some changes to this state and all our data is in a single place and secondly we have a possibility to make some asynchronous things for example like http calls to our api by using effects and we will talk about effects a little bit later and the question that i'm getting from my students really often okay why do i need ngrix and why it is that popular if i can simply use an angular service call it inside component and i'm totally fine and this approach is not shareable at all we're not talking here about state management you are just saying about fetching some data and rendering them inside component if you have lots of components and modules and you have a huge application you need something for state management you need some rules how people must work with your state this is where redux and engine rigs are so popular and they never saw a company who are doing angular for example without usage of ngrx so enough talking let's start implementation so our goal is on the simple example to bind injury rigs to an angular project and see how it works and first of all we must install several packages and here as you can see on the left we have a lot of packages we just need three of them first of all ngrix store this is a main package it brings in jrx inside the application the second is developer tools and actually here ingerix store developer tools is exactly standard redux developer tools for ng rigs and actually from my perspective this is the best tool to debug any application without digging in the code and the last thing that we need here is ngrx effects because we want to write some asynchronous code so let's jump here inside console and i have here a generated angle application so first of all i will write here yarn add ng riggs slash and we have here store the next package that i want to install is in geo rigs effects and the last package here is yarn add ng rigs store dev tools now let's look on our project as you can see here inside app i have a new module which is called post and the main idea that here inside component we will render a list of posts here i just have h1 and inside posts i don't have anything but also here i generated a service post service where we are getting a list of our posts and it is simply id and title and here we are getting it as a stream with delay 2 seconds just like we're getting our data from the api and here i also generated post interface which is just an interface for our posts so now it is time to bind in jrx store to our application and for this we must jump inside app app module and here inside imports we want to write store module dot for root and we are just providing inside an empty object and actually this will instantiate into rigs inside our application but as you can see we are not providing anything here inside because we want to define all our reducers and all our stuff which is related to specific module inside that module this is why here we won't have anything and after this it is really important to bind ng rig store devtools here inside overview you can see the implementation we can simply copy paste this lines from here store devtools module instrument and paste it inside our app module and what this line is doing it will instantiate our redux devtools and here maximum we can see 25 lines we will have log only on production and here after pause is true when our devtools is not opened now we can open our application in browser and here i have a tab redux if you don't have this tab you must just jump inside google and type redux dev tools this is the standard devtools of the redux and you will get this nice tool and actually we see here all this stuff which actually means we don't have any state but we already created our reduxtive tools and successfully bind it to our application with just this line our next step will be to create a state for our post so actually post is our module where we want to work with posts we can say that this is a single page for example and here inside our posts inside types i want to create a post state interface ts so the main idea is that inside redux we have just a single global object and we somehow want to have slices inside this object and actually inside every single module for example inside post we can create a slice and actually this slice is exactly post state and here inside we will have all our properties which are related to this specific module and the main idea is that we don't have local properties just across all possible components we have a global state and we can see the whole state from any place this is why here what we can write is a new interface which is our post state interface and actually this is our redux interface for this specific module and here typically you want for example is loading which will be boolean because we need to fetch some data inside our pose which actually means we want to show a loading indicator this is where here i will create this loading and we can set it to true when we start loading of our data after this here we will store our post which is actually a post interface array and the last one here will be our error which can be for example a string or null and by default it will be obviously null and if we get some error from the backend we can just save it here and then render inside a component our next step here is to create actions so what are actions these are user events which can change these properties inside our state this is why here inside post i want to create a new folder which is called store and here we will store everything which is related to ngrix and here i just want to create a single file actions test and inside we can create a new function for example get pose and here we're saying create action and actually create action is a function from ngrx store and here inside we can simply provide a string and actually here typically you will see such notation here we have posts in square brackets and after this get post what does it mean here actually it can be any stream but all these strings and all the sections are global because redux state is global this is why here people typically want to name space all the sections with some module name and in our case we are talking about module posts this is why here we have a namespace pose and here after this we have a name of our action which is just a stream which actually means the single line creates for us in action just like we're doing inside redux store dispatch and there we're providing an action so our action is ready now we must create a reducer this is why here i will create a new file reducer ts so here we need two things first of all we must create our initial state and the initial state is the initial state of our module and here we can write our post state interface that we just created as you can see here we directly get an error that our object is missing following properties is loading posts and error this is why here we must set our isloidin and by default the state is false after this we have our post and by default we don't have any posts which means it is an empty array and last one is our error by default we have no errors so it is now and with that our initial state is ready now we must create a reducer which will change our state with the actions and here we can simply write expert const reducers and here we are using function create reducer which is also coming from ngrx stop and inside first of all we must provide our initial state and secondly our changes and every single change we are writing with a function on so here we can say on for example get post then on get post success and so on in our case here we must import all our actions and typically we are importing it like this so import star as posts actions from and here is our file actions which actually means we are taking all our expert const here and we can have like 10 or 20 of our different actions and we're grouping them in this single object and now here inside on we can simply write both sections dot get post and this is exactly on what we want to react and the second parameter here is a function where we are getting access to our state and what we want to do inside we want to return a new state this is why here i will spread our state and change its loading property to true because this is the start of our getting pose and here we want to show the spinner that we are loading something so this is how we typically write our code inside create reducer we are passing initial state and then we will have lots of ons and here we are saying okay when our action get post is happening here what we want to do and how we need to change our state so here we're describing all changes to our state and here as you can see we have access to our state this is exactly this state and here we just want to update our isload into true and the last thing that we need to do here we must inject our storm module inside our post module this is why here inside imports i want to write store module dot and here we are using not for root but for feature and inside we can provide the feature name and we are writing here post module which means here we can write that this is a post string and now here we must import our reducers and actually we have our reducers from store reducers so what this line is doing it will create for us a new slice of these reducers inside our state let's check this out as you can see i don't have any errors i will jump here inside browser and here is my state so here inside redux dev tools directly i see the global redux state and as you can see here we have a pose which is just our slice that we created and here inside we have is loading post and error this is our initial state this is because of the single line where inside we put our reducers and our reducers here is saying that this is our initial state but now the most interesting part we want to change our state this is why what i want to do here inside our components pose post component i want to dispatch this get pose this is way here what we can do first of all implements on init so we want to do something on initialize here is our engine in it and we must inside constructor inject store and actually this store is our store from ngrx and we must inject here the store to write store dispatch this is why here now we can write this store dot dispatch and here inside we must provide an action and typically you will write it exactly like we did it inside reducer import star as and here we have a post action from and here we want to jump inside our store actions and now here inside of this store dispatch we're providing posts actions dot get posts and round brackets so inside playing redux you typically write store dispatch and your action this is exactly this here we have store which we are injecting through ngrix and we're dispatching our action so on initialize of our component now as you can see we're getting get post which actually means we want to fetch some data and actually here inside state you can see that our is loading is in true which actually means this specific action changed our state and here we can click on the div tab and we see that our islogin was changed from false to true because of this action which means it is really easy to debug you can simply open redux devtools you see the list of the sections you can simply click between them and you can see every single action and how it changes your global state you don't need to console log any properties the whole state of your application is just for you here on the glance so this is the basics of using ngrx you are creating reducer for your specific module and you are creating actions that can change state now the question is obviously how we can use this state inside our component and how we can render for example this loading state this is why here we must use selectors and if you remember what are selectors from redux this is the way how we can select some properties from our state and we have something similar inside ngrx this is by here inside our store i want to create the file which is selectors.tsp and here we want to create selectors for different properties of our state and actually first of all here we want to select our feature this is why here we can write a function select feature and here we simply get the global state of our application and typically we'll have here app state interface and then after this we want to return state dot post so what this line is doing at all actually here we will have like hundreds of different properties because you can have hundreds of modules like maybe pose authentication users whatever you prefer and actually here we want to get just this slice of post because only this single slice is related to our page actually you could get any slice but for now we're interested in this specific slice this is why here this select feature is just selects a single feature state dot post so now let's talk about this app state interface what is this this is our global state this is the whole representation of the state inside your application this is a single point of truth and what we can do here inside our app we can create new folder types and inside we can create our app state interface ts and this is exactly the place where we will create this interface and where inside everything will be situated so here we can just export this interface appstate interface and what we have inside just a single property post which is our post state interface we already created that and actually now any developer can just jump inside our application open this single file and see the whole global state of our application and now he can just say okay i'm interested in this post state interface and he is opening it and he sees all these properties and now we can jump back inside the selectors and import here this app state interface on the top so here app state interface from source app types app state interface and actually here we're getting nice autocomplete and we know that we're totally right we have a slice post and actually this is just a helper to get a specific field from our slice this is why here now let's say that we want to get this loading this is why here we can create is loading selector and for this we're using create selector function and this function is also coming from ngrx store and what we want to write inside this select feature that we just created on the top and secondly we will have a function and here we're getting our state and as you can see here state dot is our slice we have here access to three properties is loading error and post and here i just want to return our state is loading which actually means this line creates for us a selector that we can reuse and it is a stream which will deliver for us our data this is why i want to copy this is loading selector and use inside our component and here inside our post component yes inside our constructor we can use this selector and for this we can write this store select pipe and inside we're providing select function and it is from ingerix store and inside we're writing is loading selector which actually means this line selects for us is loading selector property from our state and now here we must assign it because this is a stream we can save it inside this is loading with dollar for example and here we must create this stream this is this loading which is an observable of boolean because we know is loading is a boolean but as you can see here we are getting an error from typescript here it is written that type observable object is not assignable to type observable app state interface and the problem is here that we didn't specify inside our store what state we have and here inside store we can actually say app state interface and in this case we won't get any error because by default inside the store the state is simply an empty object it is not suitable for us this is why here we are saying okay this is our global state this is why is loading in this case is just a stream and now this single line will return for us data from our state this is why here i can jump inside html and just use the stream so here we have div with text loading and here i can write in gif condition so ngif and here we're using now is loading stream with dollar and we're using here a sync pipe because we're using a sync pipe we don't need some subscribes we don't need unsubscribes now i can jump inside browser and reload the page and as you can see here we directly see this div loading why do we see it because actually inside our application inside redux inside our state this property is loading is set to true now and when it will be changed to false then our component will be rendered directly and now we must to talk about asynchronous data and the synchronous effects because now you already know everything about dispatching reducers actions but obviously you want to get some data from the backend which means you have some long asynchronous operation and this is exactly what we have here inside our service post service because here we have a delay so how it works inside ngrix exactly like inside redux for example with redux thunk we're just dispatching an action at the beginning of the fetch and then we dispatch an action at the end of the fetch this is it and this is what we need to implement first of all we want to jump inside our store actions and create here two additional actions this is why here i will copy paste get post twice because here we won't get post success and get post failure because for synchronous code we need start success and failure so here will be get pose success and here will be get post failure and now here we can change the name to get post success and get post failure but it is not all because actually here we want to provide some data here we are getting something from the backend and we need to notify about this data inside our state this is why here as a second parameter we can provide props and as you can see we can auto import props here and inside we must save what data we will get back and typically we will write here an object with field for example pose and here post interface array why like this because actually from our api we will get a list of posts as an array and now here we have a failure we also want to get an error from our backend this is why here we will also write that we have props and inside here we can write that we have an error this is why here will be an object error field and it is a string so this is how you typically create actions with some parameters and now we want to change our reducer so we must jump here inside reducers and here we have own reaction but now we also want to apply it to success and failure this is why i will copy paste it twice put here commas and now let's change it to get both success and get pose failure now what we want to change in our success first of all is loading must be set to false and secondly we're getting here our pose and actually we're getting them inside our action and this is the second parameter of this function so we're getting here state and action and what i want to write here is posts which are equal to action dot and here i'm getting pose which actually means we're dispatching the action with posts inside and here we're updating our state with this pose and exactly the same we are getting inside failure here we have access to our action and this loading must be set to false and we want to write an error inside and it is action dot error and i'm sure now that if you don't know ngrix this code is really overwhelming for you but actually it is always the same you always create actions reducers selectors and they are all looking the same this is why you simply need to implement it like 5 or 10 times and then you're good to go so we successfully updated our actions and reducers now we must update our selectors so here we already have this loading selector and i can copy paste it twice and change first of all because we want to get here our post selector and here we can simply get from our state state dot post and last one here will be our error selector and here we want to get from the state dot error so now everything is prepared and we must start talking about effects so what are effects this is the possibility to make an asynchronous calls inside ngrix this is why here inside store i want to create one more file which is called effects.ts and inside we want to create an effect and actually we are creating it inside a class this is why here we can create posts effects and on the top we should not forget injectable now here inside we want to create for example get posts and the name here doesn't matter and it equals our create effect function and inside we must pass a function and now here it will be difficult because actually in side effect because they are written with rick chess it is really easy to make a mistake because we have just a lot of brackets and indentation so what we are doing inside create effect is we are returning this dot dollar actions and we don't have here dollar actions this is why we must inject it here this is why here we have constructor and we're injecting our actions with dollar and duties actions which we are getting from ngrx effects and after this we can write this dot and we have access to actions and this is a stream and after this we're writing pipe with off type inside and actually we're using here of type because we want to react on the specific action this is why here on the top we must import our actions and this is import star as our post actions from and here are our actions now inside of type we can provide post actions dot get post which actually means this effect will take place only when our get post sections is happening and now after of type we want to write merge map and inside merge map here we want to return a function and what we want to return here is a call for our service this is why here we must inject our service so it will be private both service and it is our post service now here inside merge map we can use this post service so this dot post service dot get post and this is the stream and we must react for it this is why here we can again write pipe and inside we have a map and here we are getting access to our posts and we want to dispatch a new action it will be post section dot get post success and we're providing inside our post and actually here we should not forget our brackets because we're providing inside an object and not just array of posts so this code might be really scary for you but this is the same code that we're writing again and again inside effects we simply create here an effect and here we always write this actions pipe of type and here we have some action in our case this is the starting action get pause and inside here we have a merge map and we want to return here a stream this is by here we are calling this post service get post and this is actually a stream which is returning for us data from api and here we want to react to this stream accordingly this is why we are mapping here our stream and we want to dispatch an action success the main point is that we are not writing here this store this page but we can simply return our action and it will be dispatched accordingly and now after our map we can write here catch error and inside kichero we're getting an error and we want to return a stream again this is why here will be off and inside we're pasting both actions dot get post failure and we're providing inside our error and here is an object with an error which is actually error dot message which actually means we have here success and failure so here we have a stream with map with success and here is cachero with error and here when it is failing we are calling getpostfailure and actually this code of effect you will copy paste 99 the exactly the same to every single file so our post effect is ready now we must register it inside our post module this is why inside post module here after store module we can register it with effects module dot and here we have for feature and inside we are providing an array and here what we can write is our pose effects that we just created and we should not forget to register effects module inside root this is why we are jumping inside that module and here after store module for example we can write effects module dot for root and this is it we are not providing anything inside let's check this out we don't have any errors here now let's reload our page and this is how our redux is looking like we have here get post and get post success how it happened actually we wrote inside our component just get paused this is what we can see here inside our post component just this store dispatch and actually this triggered our effect and our effect called our service which is an asynchronous call to our api and after this call is ready after 2 seconds we are getting get post success because it is finished and this is how we changed our state so our isloidin is changed from true to false and these are our pose this is by now inside our state we have is loading false this is the list of the posts that we can use now and this is the error it is now because we are not in failure now let's render this information inside our component so here we need two more things first of all an error which is a stream and here is our observable of an error this is string or null and we also need here a stream for our pose which is an observable of our post interface array and here inside constructor i can just copy paste this loading twice and rename it first of all to the error and secondly to post and here we can use another selector it is our error selector and here we will have our post selector so this is how we are getting our data from the state and now we can directly use the streams inside our html so first of all let's render an error we can simply write here ng if we're getting here an error stream with a sync as error in this case here we are getting a local property error that we can directly render and after this we can render a list of our post with just in g for loop this is by here in g4 we are getting access to every single post of our stream post which is a sync and here inside we can just render our post dot title let's check if it's working i will reload the page and we can see here loading for two seconds and after this we see our posts because they were fetched put in state and now our stream was changed and our component was rendered so as you can see when you are using ngrx code you don't have any business logic inside your component you simply have here dispatches and you have subscriptions to your state this is why it is extremely efficient for big scalable applications and actually if you are interested to learn how to use animations inside angular make sure to check this video also

Channel: Monsterlessons Academy

Views: 56,571

Keywords: ngrx, ngrx store, ngrx angular, angular redux, angular ngrx, angular store, ngrx effects, ngrx entity, ngrx selectors

Id: SkoI_VHtcTU

Length: 30min 31sec (1831 seconds)

Published: Thu Jul 14 2022