Reactive State Management Using NgRx and Angular (with Brandon Roberts) — Learn With Jason

hello everyone and welcome to another episode of learn with jason today on the show we have brandon roberts brandon thank you so much for spending time with us today how you doing hey thanks for having me i'm good how are you i'm doing great i'm uh i we we just figured out that i broke the learn with jason site uh recently and so i'm i'm watching the the fix push to production right now so that's always interesting it's going great for me [Laughter] wait a minute i fixed you oh boy okay well it's still broken but um we'll we'll we'll deal with that so what i'm gonna do is uh i'll i'll post everybody to some links here but i broke the live captioning on the homepage today everybody so we'll uh we'll have to go directly to the actual scene of the the live captioning iframe if we need it today so let me find that uh and while i'm looking that up brandon for folks who aren't familiar with your work do you want to give us a little bit of a background on yourself yeah sure i'll give my my my elevator pitch uh my name's uh brandon roberts uh you can follow me on twitter at brandon t roberts uh there i i have a lot of fun on twitter i talk about sports i block people sometimes just for fun fading into certain words i do open source i maintain a couple of open source projects one of which we'll talk about today and i'm also a developer advocate at narwhal where we uh we build some cool stuff there that is open source also uh so uh the main thing there being nx which uh he had a previous show about that which uh is an open source uh project open source build framework for uh building applications of many many types so that's one of my another project that i work on also which i'm good but yeah glad to be here yeah yeah uh now i'm afraid to i'm afraid i'm going to get blocked because i don't know what the words are oh i'm sure the chat will let you know great great this is going to go good for me i'm going to get blocked midstream [Laughter] but i yeah so i'm super excited to talk today because we're talking about something that i have known about for years and have been completely intimidated by four years which is reactive state management um when we get into reactive state management it starts to feel magical to me and typically my response to magic is to run away try to kill it with fire you know i respond like a like a 14th century villager to anything that feels like magic right um so so maybe you can help demystify today that's what i think i'm excited the most for is is uh we're gonna peek behind the curtain and see how the magic is made so can you talk a little bit about you know what is reactive state management what what happens uh in that style of app right so um reactive state management and and i'll talk talk about this mostly in the context of angular of course but angular is built on top of or angular uses rxjs which is a reactive library that uses observables as its primary of handling events but uh being reactive in in that in that frame of mind is uh more declarative than uh using a more declarative approach than using an imperative approach so we deal a lot with um a lot with uh functions and uh do so a lot of functional programming is used in rxjs and uh use of a lot of some of the and this is where some of the things come in like operators but the the main thing is like the observable itself which gives you a a easy way of like a primitive to listen to some events whether they be synchronous or asynchronous uh handle listening for event those events that happen over time and giving you a way to tear down those uh tear down listening to those events so the the reactive part of it itself in angular is to kind of take that model and use that to manage the state every application over time like if we were just talking about like calling functions then there are easy ways to get into like race conditions using those kind of um using that using in some cases you can run into race conditions that way but uh the react using the reactive layers more like say a declarative where you you are kind of mapping out what you want things to do once you based on some event or some action that happened so in the and that is what we kind of strive to for you know in reactive applications in angular to where you want your everything to be uh mostly a stream that happens like over time as opposed to okay yeah so so to repeat this back to make sure that i that i have the mental model right when you're talking about observables which are kind of at the bottom of of this model what what you're doing is you're basically taking a and piece of memory an object or something and you're saying i want you to look at this and i'm going to send events to it and like so this is sort of like having a click handler you know like we're we're doing like an ad event listener and when a click happens we can perform some kind of function this is similar in concept but what we're saying is i have some data and when a change happens i want things to be subscribed to that change so that i can update my ui based on what changed in the data yes yep okay yeah that's exactly this yeah pretty pretty close uh comparison to like it's like an event handler because you get uh like say you can add an event listener you can tell it to listen for a certain amount of time and then you can say remove that event listener so that yeah the concepts definitely line up there gotcha okay all right so that that immediately makes it feel less intimidating like i know how to do a click handle or i can i can write you know different different events uh on the dom so let's just apply that that knowledge to data so when when you're talking about this you said you know that in angular this is a popular approach i think i've i've seen ngrx all over the place um what like why do you think this approach holds water like what's the what do you think is the like real benefit here and why why it is such a strong way to manage your data versus other approaches that you've seen yeah for me the in some some of the other things that are like i said rxjs provides in general is like i said that listening the setup listen and tear down is one thing if we're just kind of talking and talking about it in general if we're like comparing it to something like a promise uh promises are uh kind of promises are eager versus observables that are more lazy uh that would be one thing they're also observables have the ability to be canceled as opposed to a promise where it's it once you start up a promise you essentially have to wait until that promise emits a value and observables are except events or data or things that happen over time as opposed to a promise which is more of a one-shot uh deal there that that you kind of listen to and observe as it as it happens right there okay so those are the if like i said just thinking in general about it those are some things that uh we can point to to make a comparison per se we're not saying that one is you know promises are definitely uh less uh less to comprehend i would say in general just for a few you know used to just things that are like baked into the web platform so um but it does give you some different differences and advantages there i would say that are important if you're you know if you're working inside that that mind frame because it is is a bit of a shift there i would say i get you i understand um no i think i like so this is this is kind of an interesting idea because what we're basically saying is that instead of instead of having to think through all the different states of our data and and being ultra explicit about exactly what's possible and and you know writing all of that logic we can instead say we want to be oh okay and now i understand how i got named we can be reactive to our data and when when data changes we can just say ah i've observed a change i'm going to respond to that change um and that you know that also feels like i don't know it's a very human way to to think about data in instead of a computery way where it's like i've built the i've built the pipeline and and the data must flow inside of this pipeline exactly as i've defined we're instead saying like here's a stream of data if you want to listen for different events on this data you can like pick those up and like anybody who uses those like so when when data gets picked up from a stream with these events is that something where sequence matters or is it like if i have 100 pieces of ui that are all listening to the same event they the order that they all grab data even if they modify it a little bit are they are they kind of dependent on each other or is this kind of independent like the event goes out they all update based on that and if one of them changes the data it actually has to go emit a new event yeah so yeah so in this and let's say we'll get more into this with ngrx but yeah the all the listeners of that stream of data or property would get that event at the same time or as it goes through and uh emits that event to all the listeners so if depending on how you're structuring that data if there wouldn't be somebody necessarily modifying that a subscriber wouldn't be modifying that data along the way uh depending on how you have it set up so each one of them will kind of operate independently on it now you can share you can share those uh streams amongst many listeners but uh if it you know in the context of like global state or local state if we're listening to those streams and each one of them kind of operates independently and you can like say subscribe to that and do different things based on those different events so there is some safety there and that you're not going to it's not going to be unpredictable to what you get on you know unless you know depending on in this concept it kind of gets into the operators or in rxjs how you modify that kind of pipeline or that sequence that happens okay but but yeah that's something that in itself uh the observable and the the listeners of it all get that piece of data so nice nice um and do you find that like is there is there a certain type of app that's better suited to this or do you find this being like now that you've got this mental model this is just the way you think about data yeah it it it is more the way i think about data now and just because i'm more comfortable with it like i said if you're uh used to using or kind of like building your own uh kind of like reactive strength or building your own streams that kind of simulate that simulate that then it's a little different but yeah most it definitely helps to like think of that mind frame of and i'm going to quote the like the founder of ngrx who who has said this many times that everything is a stream if you start kind of like thinking in that mind frame then it yeah makes working with that in with rxjs and angular makes it easier if you kind of embrace that embrace that way so nice okay okay i get it yeah i mean i feel the same way like when i started thinking about there's a lot of ways that i write code now where that's just the way i that mental model that i have now and it makes things make sense um and so all right i'm really excited i i i think at this point probably what makes the most sense is to actually start doing a little bit of code we can see whether or not uh whether or not we can get me thinking in in streams so let's uh let's jump over to pair programming mode here and we are this is this is the deploy that hopefully fixes the home page let's see if it works nope still got some errors doing the friday deploy thing we are literally fixing it live um okay so here's what we've got i have uh this is the um the iframe that i embed on the home page so if i get rid of the the extra font stuff that i did here that doesn't copy paste very well i can uh send this to everybody here this is the uh the live captioning for the show and that is made possible we've got rachel with us today from white co-captioning thank you so much rachel that's made possible through the generous support of our sponsors netlify fauna asura and auth0 all of whom were kicking in to make the show more accessible to more people which i appreciate quite a bit so uh head over to uh this this streamtext.net player if you want to follow along with the captions today and i'll figure out what happened on the homepage here before our next stream so this will actually be fixed um also while you're you're clicking on things on the internet make sure you go and follow brandon on twitter uh like he said he he's uh he's a good follower lots of lots of good good information on there and you know you can you can try to figure out how to get blocked yeah if you if they follow follow the uh follow my uh twitter long enough they'll equip me if they haven't already they'll quickly find out what the what the key word what the key word is so yeah it's a fun game to play now great i i hope that i win that game instead of losing it so uh and today we're also going to be talking about ngrx this is the the core of our focus today um and i'm going to just shut all that down so that we have tab space okay so here i'm i'm ready to create a new project so if i want to get started and learn this what should my first step be yeah so first we'll need to create of course create a new angular project and okay i i use uh an exo that's my my go-to so if we go to uh nx index.dev we can should be able to go to the site there okay and uh uh copy that uh command that yeah that mpx create next workspace will start there and if you um enter that then it will give us some a name that just we want to have for this uh show or for this project anyway okay so i'm going to call this reactive state ngrx yep and and then we can go down to yeah it has a lot of presets so yeah we'll go with angular okay and we'll start there application name probably just name it the same thing uh you could just name it my app or whichever uh whatever your preference is it can be is this is this one like a slug or is this uh like plain text it's just plain text yeah it'll be the the component or sorry uh it'll be the selector for the component uh it'll be the selector for the component so it could be like my app or just one word uh there won't be multiple words oh i got it i got it i got it okay so let's call this um like that kind of thing yeah sure okay let's spell it right though okay here we go and do you have any preference uh css is is fine okay nx cloud uh yeah we don't we don't need that for this one so you can just click no on that one okay and then we'll uh go through and create that workspace there so uh it's usually is is uh pretty quick about uh installing that but uh if it takes a little bit here then we can kind of like say talk about ngrx more in general and and kind of like the background of it as a project and how it's kind of evolved over time as a as a state management uh library or set up kind of a set of libraries at this point but okay but yeah that is uh where it will be all right and so um i mean maybe this is worth doing a quick shout as well to nx we have done uh a little bit of work with nx in the past we had uh adam barrett on the show so if you're interested in how nx works and what we just did using that this would be a good episode to watch for uh but the the short version i'll maybe you've got an elevator pitch what's the the short version what is nx yeah so uh nx is an open source build framework that does a few a few main things it maps out the dependencies of your project so it knows how your projects connect together it has support for generating generating projects for many ecosystems we support angular react and node or the main or the main ones and uh and the other one is it does like local caching so if you are building a project or say that that you never build the same thing twice so if you build a project and you didn't run that same build again then it will immediately give you the results for that and then oh nice yeah you can kind of share that that share that across your team or your organization so it kind of scales up from there but it's yeah it's a build framework for monorepos and helps you build applications at scale so that's the yeah that's the the elevator elevator pitch for nx anyway cool okay yeah and yeah and so i i really like it um what i like about it is that you've you've got a really nice flow in nx for if i'm working on something that would be an npm package but it doesn't really make sense to publish it as an npm package nx has such a good flow for like making it feel like i'm using an npm package but not forcing me to actually publish it i think that's such a that's such a great like little bonus of of using it yeah definitely so okay so now that i've got this it looks like i don't have nx installed globally am i going to need that uh you could just use mpx if we need to okay run any yeah mpx and then nx if we need to run any commands or anything but yeah that should be okay i just realized i put this in the wrong place so i'm just gonna move this whole folder up a level and then we're gonna move into it okay so let's open this thing up and take a look at what's inside okay so inside of our project uh we have so this is already a little bit different from most pro for most projects that i've seen because i don't see uh like a source folder right there's apps libs tools um so what what are we looking at here yeah the apps the apps is mainly where we'll be working out of today so yeah usually if you're having one project it'll just be under a source folder but you know if we had multiple ones then they would be uh you could have multiple apps and like you said talking about the kind of like the internal npm packages uh or in packages within that workspace you would have libraries there so but the the app is where we're looking where we'll uh focus on uh today for and we'll just kind of create create everything inside that reactive state uh application there okay then we have the source yeah then we have the source folder which is a little more uh familiar uh okay and so this is this is like the nx monorepo setup where where apps is one thing and then if i have like a a library that i wanted to share but that's not necessarily a package and then i'm not 100 sure what tools are but uh so this is like the organization and then down in here this is like in a normal in a normal project that you just kind of spun up from scratch what you would end up doing is this would be your whole folder so this end-to-end testing that's out here uh the the libraries the tools and then all the the nx config that'll let us ge it comes tests already running and and also that's great they definitely get a lot of the you definitely get the you get the jest configured and cypress out of the box so whether you were doing angular or react or whatever your project is then those will be those will come come pre-configured for you nice okay and it looks like i'm missing a few things that i need so i probably need the angular thing do i need this nx console do you think uh you can but you don't we won't need it for for this uh it's just a gooey on top of the nxt a lot yeah so if we're not gonna use it today i won't install it um but the angular's angular language service seems like it'll be useful probably need to be able to see what what's going on there um yeah it definitely gives you some some good helpers for uh for your templates and things so great would be would be helpful okay so so default what we've got here uh let's see how much angular i remember because angular is definitely not something i have a ton of experience in so what we've done here is we're pulling in app module from app dot module here and this is the root of our code which pulls an app component and that pulls in the template and the css yeah so the yeah yeah at its core you have uh modules there and this is just the template that we'll just replace uh when we get to get to that part but yeah there's the the top level app module which angular itself has uh what we call ng modules which are a way to kind of wire up your components and uh make the application aware of earth parts of your application aware of components and providers and so this is just like the top level one that kind of like bootstraps the application and gets your browser level browser level dependency setup there and the app component is just the that's the main component that we that'll start up when we uh start serving the app so uh so it has the like i said ng modules and components there or the like the main things that you have in any angular application itself gotcha um i'm also seeing that my overlay tweaked out here so let's refresh that page okay there it goes now people can see things um all right so uh good so then inside here in this html this is this is basically where we'll kind of yes yeah yeah we can clear out well yeah we'll add need to add the i guess before we go next we can add the ngrx a couple of ngrx packages first yeah so if we go to if you install at ngrx and uh then slash i don't know what your preference is if you like to do the multiple packages at once or the well we can do multiple packages at once that's all right okay cool uh you'll so you'll start out with store uh so that's the main redux package and we'll do uh m or ng at ngrx slash store dash dev tools uh dev dash tools or dev tools like this uh dev tools all one word yes okay and uh the last one will be at ingerix effects effects yes e-f-f yeah e-f-f-e-c-t-s yep okay and that's it that'll be what we need got it here we go um and so you said the store you said redux so is this using redux under the hood uh not it's not using the redux library itself under the hood it was inspired the original project uh was inspired by redux but it doesn't there's no concrete uh relationship between the two i call them i call them cousins because they're like close enough to close enough uh in functionality or like the idea or both projects is close enough but not not exactly like uh siblings so yeah gotcha okay i understand yeah all right so um so now we've got the ngrx store dev tools and effects and i i'm gonna ask you questions about what each of those does as we pull them in here um if i want to just run this project so we can see where we're starting and uh and and kind of mess around is this do i run like npf npm nx yeah mpx nx server would be the actual command there okay oh wait i messed something up npx nx yeah mpxns or yeah npm run nx sir would most likely work also yeah i saw a few people in the chat i saw will will johnson shout out to him uh aj c shout out to him too yeah i saw ben ben came in with a raid thank you so much for the raid ben um saw mike hardington in earlier uh lots of lots of good folks in here today thank you all for hanging out with us yeah okay so we have the the app running now you just go to localhost uh 4200 and open that link up there to see the app that it starts up with okay so here's a here's a nice oh this is a good starter too because it's like got oh he's confused about how this works here's a million ways to go learn more information uh this is this is great so yeah yeah we can uh yeah we'll end up just nuking all that but yeah okay so for now i'm gonna just boom gone we we have an empty file now and i can put in like hello chat come out here does this hot reload oh it hot reloads that's beautiful okay so we have uh we have a nice development environment we've got things running and now i'm ready i want to i want to make something reactive so um what should i do first okay so what uh what we're going to do here is we're going to start out with the with the appreciate for example we're going to use account use a counter okay and we're going to uh use the store to uh update the update the the state of that counter or the value of it so we'll keep it and keep it straight forward so if you want to yeah just create a button and we'll do the we'll do the uh we could do the counter value there or we could just create a d of kind of with the with the counter value in there uh and then we'll create three buttons for incrementing we'll create three buttons one for incrementing one for decrementing and one for resetting the the value of the counter oh okay i got you i got you um so let's do we'll have our our value will be here or maybe we should do it let's let's make it let's let's keep it in the spirit of the show right so we'll we'll set it up as a count of boops and then we'll have a span where we can actually put that if we need to put it in an element and then we will have a button to add a boop and remove a boop i don't i don't know if you're you're technically allowed under the laws of physics to unboop but we're gonna we're gonna say today that you can um and what was the third one you said you said add increment decrement and reset but we can we could just do the the add and the add and then boop if that if that'll work either way yeah yeah let's let's start here and then we'll if we need to add more we can so this now gives us ad boop unboop we've got buttons now if you know these don't do anything we just made them into into the markup uh but at this point i think we're actually ready to start doing stuff yep and there go the boots uh so yeah if we go into the appcomponent.ts and we're going to define component.ts here we go yep that one and you can remove that title the title there okay and we'll set a value in this class name count and we'll set yeah we'll name account and we just set it to zero so yeah if we go back into the app component there and replace the zero with uh two sets of curly braces yeah there we go so that'll be uh enough to uh start with ah and then if i go in here and change this like just to show that it's what hooked up mm-hmm yeah good thank you okay good perfect starting point okay so we want to add boops and we're going to add boops and unboop boops if that that's the way we're gonna okay so uh what we want to do to manage this um with ngrx is we want to kind of set up the kind of the redux flow here so we're going to create a file called uh we'll call them uh we'll create a file called action or boot.actions.ts where should where should i where should this live you this can just live in the app folder yeah you can just create it yeah we'll just create it right there in line for ts like that yeah yep okay so what we want to do is uh define the like the events that we're that that we want to trigger here uh for the uh for the boots so we have a function in ngrx called create action so if you import uh or we can create i don't know how much yeah you import create action from at ngrx store okay and this is like i said a utility function where we define the like the type and the uh the event and the source of where this came from so if we want to create a constant uh for uh or we can export that if we export that constant we could say uh boop we'll call it boop added okay yep and then we'll set that to create action and then we'll create action yep and then inside there we'll define a text string and this is just a descriptor of the of the what we're doing here yeah you can use boop added uh we usually used to kind of break this up into an event in a a source and an event so we can okay square brackets oh go ahead yeah so what's the format that you would use for this you would do square brackets yeah just do square brackets and we can call it boop and we could put a boop in the in there and then we could just put add it out out on the side of it like this or no space yeah with the space is fine okay yeah so we're just declaring these events that are happening uh in here and this is just gonna at the end of the day this is just like a plain javascript object uh that we're using to create action with so we have one for boop added and then we can create one more action for uh un unbooped or uh we can probably do like removed so that it's a little yeah a little more uh like a little easier to keep like on a convention here so we've got one for for added one for removed okay okay so we have our actions in place there and next we want to create the reducer that's just going to manage the the state of that that value so next we'll go and create a different file called boop.reducer.ts and you can just inline that also there okay so we got create action and then uh here's where we'll create the reducer that'll just manage to manage the count of boots that we have so if and to create that you'll we have similar functions for uh create reducer so if you import create reducer from ngrx store yep so we'll have that one and for the well for the export we'll export a constant for initial state and we'll just set it to zero okay that'll just uh kind of mimic the initial value for what we have there uh so that will uh like if you if we were building like something a more complex object then you could define an interface but here we're going to keep it keep it straight forward here so so next we want to create the the reducer that's going to manage that that value so we're going to export another constant uh for reducer and uh yeah so you can set that equal to create reducer and yeah open that up and so the first argument there be the initial state that we just defined okay there and then we'll the next set of arguments will be the the handlers so each each handler uses an on um function that's also also imported from ngrx store so either you can import it first or you can just type it out and let it let's yeah let's type it out and it hopefully will auto complete for me so is this it looks like it's a spread so is that an array or yeah each one of yeah each one of the arguments after that uh will be the the handler so they'll be separate yeah okay yeah yeah so if you just type on uh there and then it will give you that import from ngrx store and we can put that on on a separate line there to just make it a little bit easier to read there okay okay so inside of the on handler we want to listen for these actions the two actions that we define or start with the the boop added action so if we want to import that one so the first argument or the first set of arguments is the actions that we want to listen to uh so we have boop added and boop removed are the two so we only want to on the boop add we want to of course increment and then we'll have one for loop removed okay so we've got these in so the next on the boop added uh we'll put a comma there and the the actual uh handler for that action will be what we're defining next so each each and this will just be a callback function that we have there it'll be state state of the and optionally if the if the action itself has some additional data associated with or a payload then we could manage that also there so yeah so it would also give us the action itself yeah but also getting the action itself yeah and like i said if you if we had if we added props to the action we could use those two but we're just uh we're just dealing with the state right now so we'll just open that up and return so i could just do like state plus one yes yeah okay exactly and then on the remove so that's all that we have to do for the for the handler there and then the boop remove would be state minus one great okay so now we've got initial state we've got a reducer we've got these actions that we can send and remove and this this feels like you know okay this is all making sense to me whenever a boot gets added we want to add one to the state whenever one gets removed we want to remove one from the state um and we would probably want to do like this one we'd probably want it you can't go to negative boops right so we would go yeah you can just define how to define if you want to how you want the logic to go in there if you want to less than or equal to zero we can return zero otherwise we can return state minus one that's yep horrible code but let's let's all pretend that let's all pretend that was clean and okay now look back okay so now we have the the two main things there we got the actions we got the reducer and now we want to wire this up to the the store so we'll add we'll register the uh boop counter in the in the store so to do that we'll go to the app module at module.ts module.ts is here yeah and this is where we kind of this is where we set up like global services or global providers uh i think react has something similar or providers are you kind of used that way and react to work so like this is where we were effectively at this level we are wrapping app component with whatever we need yeah yeah we're providing yeah we're providing whatever the services are needed for the entire application okay so our store is going to go in this in this providers array well we'll add it to the imports uh into the imports oh okay it does have providers with it but by convention uh we'll use it we'll register it using the store module okay yeah so so yeah if we go into the after that one just add a comma there and go ahead and use this store module dot if you import the store module there's a capital s score from an import store module from ngrx store okay so we'll put in store module store module then we'll add the dot for root which is just a static method on the store module uh for root and then we'll add that with an empty object just to start out okay and uh one more thing we'll add is these the store dev tools and that's if you import that from the store or import that import store dev tools module and that comes in from store dev tools well yeah that'd be store dev tools module there durative tools module got it got it got it okay yeah we're yeah we're keeping the like i said the end the engine module uh kind of uh keeping the ng module convention there so it'll be stored devtools module dot instrument and just what that does is if you have the redux dev tools uh installed then you'll be able to you'll be able to use the same redux dev tools that you would use if you were using this in the react project or anything that could oh nice that can hook into the the store dev tools there you'll be able to see do i have that i might have that apps i don't think i have that okay i'm not gonna i'm not gonna try to install something else today yeah this is great yeah that that would be enough so now we want to i do have it oh yeah there you go okay let's make this bigger there you go pops right up there slick okay so here and here's our store like popping right up um and then if i look at the raw let's see action state yeah we don't have any we haven't made it uh yeah that's right we haven't registered it yet so okay if we go back to the the uh store module.for root inside that object we can give the the key of what we want this feature to be okay uh so we could just call that uh boops uh if you want to call it that and then just import the reducer from the from the file producer from boot producer yep okay and just what that does is like say if we were using like redux you would use configure store and then you would have your your initial value for that particular slice of a piece of state so that just it's just a at the end of the day the store is just one big object and we're using that we're using the dev tools to just inspect that inspect that object there but yeah that is extension has been out there for a long time we definitely make good good use of that so absolutely yeah and so the um it looks like you can use redux dev tools in chrome edge and firefox i'm working in edge uh and it's working great so now i can see we registered boops and we added in our reducer and we've we've got it right so that's that's doing the thing we want so yeah does this mean so at this point we've we've created actions we created a reducer and we've registered those as uh imports for our app component yeah we registered the registered the store as a global service so we're yeah we're looking at the the global uh state management side of ngrx here okay yeah now we can actually just uh use that we can set up the store in the app component to to handle that uh to handle the state of that counter so first we want we can see what the we can actually update the counter update the account in the store without having to actually reflect there first okay so what we want to do first is to inject the store service which is available globally because we registered it there so if you import if you import store uh from imports the store service from ngrx store a lot of stores uh well it'll just be the store sorry it'll just be the story yeah i i refer to it as a store service but it's just a yesterday indirect store yep okay so and then in the app component we want to add it to the want to define the constructor so where we can inject the store service okay and the way that you do this is uh if you just type constructor c-o-n-s-t-r yep and then we'll open that up and then we'll add the store as an ejected dependency so in inside of the parameters of the constructor we're going to set that to a private uh private property and this is one thing that angular does it does have dependency injection so we can say that and if i want the store i can just find the store as a property so we can just call it store and then use the colon and then use the the store import that we imported from the top there so yeah it knows oh okay yeah so since we or because we registered the store now uh it gets injected automatically into the into the app component there and so so then let me see if i haven't written class based stuff for a while so so if i remember correctly what we've done here is we're we're declaring count on the class so in the constructor we'll default it to zero that's okay but here what we want to do is get this store and set this and let me see this dot count to store.boobs well no it won't be that it won't be that straightforward okay okay because we have to we have to subscribe to the store to get values out of it yeah okay right because it's an observable yeah yeah the story itself is an observable of the state over time gotcha gotcha yeah so if we want uh to update that well yeah we can subscribe to the uh well let's we'll use one of the angular hooks to subscribe to the the counter and uh so if we outside of that constructor if you define another method there another method in the class they are called ng lowercase ng and then capital on and then uh uppercase init or init with a capital i okay so this is just a life cycle hook that is called after the constructor is called okay so here we just uh here we want to subscribe to the store so we can at least see the value getting updated so next we want to uh say that this we can subscribe to the store saying this dot store and then we and then we'll say subscribe is it is it this auto-completed one here uh no it won't be that one we'll use these we'll use the select so if you say it's just i stored i select yep okay and then that'll take a callback function and then we'll say this we'll say the state is a type of any uh so it won't so it'll just give us yeah we'll say state is any uh and then we'll say state dot boops i believe that's what we named the the count name the value for the the piece of state there oh it does not like whatever i just did there we go uh so state dot oops there yeah okay there we go uh and then after that we actually have to subscribe to this observable so that it'll update the the value of the count so what we want to do next is do a dot subscribe on the end of that subscribe and then the value is uh this will just be the value that comes out of the observable so if we just use value as a name there and use a callback uh open that up as a callback function okay and then we can set the count on the class to that value like that yep okay all right okay so anytime the store is updated with that counter then we will update this update the local value here now we like i said we could get into the into the weeds of uh observables and subscribing and unsubscribing but we'll for this one we'll just keep it straight forward so next we want to dispatch the action to we kind of want to create this this uh reactive loop within our global store of dispatching an action so if we go back into the app component well let's let's stay in here for a second because it'll it'll it'll we can do it a little more straightforward if we do it here uh so if we go into the if we define another method in here for uh add boop for the the method there yep and then what we want to do is dispatch one of the actions that will update the the state in the store okay so we do this dot store dot dispatch this dot store dot dispatch yes and then we can just pass the boop added uh event or action and this is the one that we're going to import okay yep and we'll just call that as a function uh so it'll just return don't need whatever that no we don't we don't want to work a thread that's a rabbit hole we don't want to go yet okay so yeah we got boop added and then we want to call that as a function call boop add it as a function outside yeah that's what we want yeah and we'll go ahead and add or use one for uh boop remove or remove boop also so we'll use the uh remove boop there and boop removed for the other event there okay okay so we have those two actions there the add and remove okay and so then that will update the the count in our update the counter in our uh on the page there uh so that essentially that is what we need to uh for the global state is to make this uh reactive uh where we can see what the so we have it hooked up to the dev tools anytime we dispatch an action the it's going to receive that right the reducer is going to receive that and update the state and we're subscribing to that we're subscribing to that value so anytime that value gets updated it'll automatically update that count yeah and i don't actually need this to be in a span do i it's just going to work right yeah so yeah so yeah now we're going to call these like we so because we've declared these in the component yeah we need to we do need to add them to the template to using the click handler so we're kind of connecting those two things together so in the app component uh angular uses uh parentheses for setting up click setting up events okay so we just use a click uh click inside of there yeah you should type click and then the what we want to do is call the uh so we set up the event using the parent the parenthesis and then we'll set that to equals and then we use double quotes to say what we want to do when that event happens so here we just want to say add boop yep and then we're getting some oh we get angular yep service is uh helping us out here nice ad booth so we'll call that call that method the ad boop uh when we click on that and then we'll have same one for remove boop so we have to call those as uh methods they have to be like called yeah you have to be called okay and that it allows you to the click events uh it gives you that information there with it so if you have something you needed to do with that event then that that's where you could pass that event to the click handler whether it's but you already got it you already got it got it rolling there so yeah well so i mean this is like this is slick too because so check this out like we we did um and you know this is like a standard uh a standard like complaint that you'll hear about um any type of redux-like implementation like you know oh well what about the boilerplate okay well is that the word hold on is that for a second hold on a second i gotta go to twitter real quick damn it you feel it you fell right into the trap um but so so but this is like a standard complaint people say like oh i don't want to have to write all this yeah but looking at this you know we didn't write that much it's really clear what each piece is and out the other side we get this really declarative way of getting it at what's happening okay i know when i click this button i'm going to add a boop when i click this button i'm going to remove a boop and when we do that we have freaking time travel like we can just go back and forth in our app and see where we were that is incredibly powerful look at all those same the we've got all the same benefits and usually uh some of the the same complaints that we do with the just with the pattern in general of boilerplate and uh being able to but the time traveling does does win some people over so i mean give and take there this is this is one of those things that you know i i think there's a this sort of philosophical debate that happens and um i saw like kat marchand had a really good take on this too where when you start looking at setups like typescript when you start looking at setups like having these these action dispatchers and and these conventions when you're first writing code they feel like a hurdle you're you you want to get rid of those constraints and you're like oh it's i i'm feeling hemmed in by by this these typescript types i'm feeling hemmed in by having to write all this boilerplate to get this code out i'm feeling i'm feeling like hamstrung i can't just get out there and create but then when you go to maintain this or you go to hand this off to your teammates or you go you start to think boy i wish that this had more like structure to it right like i wish it was easier to figure out what's going on i feel like you're trying not to say the word here with that i'm trying i'm trying but but i think that the the real power of this that i've seen is that when you get to the point that you are actually trying to maintain software if you have to go refactor something you got to change out some code you got to hand this off to a teammate and you're going to go work on a different project having types having time travel having this really clear structure makes it much easier to do that like as a developer i can drop in and open up my dev tools and see ah okay so when i click this button it calls this action i can go search in the code and find where this is and figure out how it works so that's the sort of thing that i think is you know when like sure if you're working just you you're this is an experiment you're just trying to get something you know work out an idea okay maybe you don't need all of this but if you're trying to build something that's going to live this is going to help a lot yeah and i think that a lot of uh i think the reason why it's it it's been more popular in the uh react ecosystem and it's popular in the angular ecosystem and i say this a lot is it's uh sometimes it's more about the process and the the pat the process and the pattern is what people kind of gravitate towards to gravitate towards if you're working on like say a big team and you have maybe people on boarding and off boarding a lot and you want something that's predictable and that you can say you know this is we didn't create this here so this is something that has been like battle tested outside of even outside of angular i react and kind of flows back further than that yeah something that you can use in that in that context to onboard like onboard team members with or if you uh if you have people that are more comfortable with uh rxjs which this is all built on top of our exchange so the the streams and the observables and everything already just baked in uh that they can it will create you know it's a way to create these streams for you so that you don't have to worry about am i creating the right one am i using all the right we haven't like say talk about the operators and things but uh give you give you all that kind of that flexibility without you having to like roll your arm from scratch yeah and so so i would actually love to see you know we've got about probably 25 minutes left here um i'd love to see how this expands out so as we're we're working on more parts of the ui uh maybe we can add something that listens to events and you know if we um we can set like a level like if it's under five boops we'll say the boop level is low if it's between five and 15 we can say it's you know average and over 15 will say hi or something like that uh yeah sure so so to do that i would i let's let can we just create a whole new component um yeah sure okay so let's uh yeah i'm gonna need a lot of help here i got it so the i think the quickest way if we right click well no that's probably be the uh using x but we can go to the the command line and just generate a component uh for the for the app that way okay so if we do mpx nx generate uh and then we say component and then you can give the component uh component a name give it a name of let's call it uh boop level is it should it be like that i think that works okay we'll see if it it if it normalizes oh cool it uh it like kebab cased it for me yeah that's nice all right so if you yeah so we have the boop level counter there our boob level component there excuse me and then if we look at the component it's similar setup uh there where we have the selector and the also gives you the tests and things there so if we look at the selector and the component there this one just has boop level works in there so if we go back to the component and we you can copy that selector there that reactive state ngrx boop level selector and we can drop that into the into the appcomponent.html and that will at least give us uh the uh yep the component there like that uh it'll be uh the open open and close tags it won't be so it won't be self-closing yeah so thank you gotcha not self-closing all right so that will give us oh and then i got to restart it because we generated the component yeah there you go yeah so that will give us the component they can kind of work around with to use uh what the use to share kind of share that value with this other component and kind of do things based off based off of that yep so the level works it still is all well and good and even even the the logic worked there for hey my really really great code actually functioned appropriately so there you go okay so this is like that all makes sense we've generated a new component and now and this is where i think you you know you mentioned like convention and patterns like now that i've seen this once in the app i know exactly what to expect when i look into another component and i know where things are going to go and all of those things so the one thing i'm unclear on is the app component we wrapped we injected uh hold on i can find it in the module we added the store and all this stuff and now this is wrapped around our boop component so does that mean that it there's inheritance or do we need to also bring in the store to the boop component yeah you do have to you do have to inject it into that component but it is provided at the top level from the top level down so the the as you see the boot level component is in the declarations of this component also so it automatically yeah so yeah the cli did that for you as far as handling importing it that importing or importing adding it to the declarations got it but it has it has all the same access as the app component does at this level okay so does that mean here that i like i can yep so in there you can just uh use private again and store and just inject the store there yep okay and now you have access to uh to the store there and we can do some we can do some things in here with the count and we'll use uh depending on if we want to show you just declare it yeah directly in the in the class there yeah we could say this.level and for here at what you want to do i guess tell me tell me what you want to think of that value and do something basically yeah my thinking so like if i if i just kind of pseudo code this out if we've if we've got our our boobs and let's say it's 10 right we would do a um like if boops is less than or equal to five um we'll say this dot level is low um okay else if uh boops is greater than five actually we could even just do like greater or equal to 15 you can say this dot level is high and then the last one would be uh else and then we just want to show that show that show that in the component or just yeah i think we can we can just show the the level so if we if we set the level then i can go to my component i screwed it up and we can say is level right so i've i've made a mistake in my code down here that's causing it to fail but uh this is like oh i know why it's because i have extra extra curry but so this is this is kind of the idea here um and so it we set it to 10 so it auto completes to average and then if i set it to 17 it'll say hi and if i set it to four it'll say low okay so let's yeah so what we're gonna show so we'll do something we'll do something similar we'll subscribe to the value of the boops and then we'll use we'll use an operator to map that uh value to the level so we won't in this case we'll we'll do we'll do this in a more reactive way okay so we'll say uh this level uh we'll start out with this dot level and then we'll kind of move it all right sorry this dot store okay uh dot select and then we'll you will just use the state uh again here um state and then we'll do state or you set state as any again here and we'll like say we're not having to go like full type safety and everything here right we can wrap that state any in parentheses oh right right right yeah and then say state dot uh oops so that'll give us the value of of the boots themselves so what what we want to do is instead of saying okay well we're still going to use some of the if logic here but what we're going to do is add an operator or kind of use a pipeline use a pipe in rxjs that will let us turn the current value of the boop into a string so what we want to do next is on the next line you can use dot pipe uh yes and so this is a way that you can and this is kind of where the the extra parts come in of rxjs to where you can use operators to perform uh perform basically function calls on the data that's coming through okay so here what we want to do is we want to we want to do uh we want to map the value into a string so we can bring in the map operator from rxjs so if you just put map inside of there and we want uh it should be all lower case we may have to import it uh yeah maybe it's just important lots of options up here so um that was in effects uh well that would be from rxjs operators so if we import map import map from rxjs operators and they've worked on this some more also i'll throw that plug out there that they are looking to consolidate this down into just one import but the map itself is just a function so what we want to do here is map and it's just a callback function so it'll be the va the current value of the boops and then we can have a callback there and then we can wrap that that logic that you had into uh put that logic into the the function itself okay and then go to where i hard coded it yeah so instead of the instead of setting the level uh what we want to do here is return a new level so operators like the operators are just pure functions so they but what they do underneath is take in the current observable and return a new one but since we're just mapping to a new value it'll just do that underneath uh for you okay uh so now that we have that set up uh what we want to do next is set the level to that store uh set this.level to that store like that uh yes and then where we have low yeah where we have low observable low high average yep it's telling us that that needs to be an observable uh so you can take out that value there and put a sorry we'll add a type to the level so just put a colon there and we want to say that this is an observable of a string yep so if we put observable there and then it takes a type and then you can take out uh well the the value itself is just a string but we want to observe so you can take out the low the initial value yep okay let's take that out and it's probably complaining now that we have an uninitialized value uh so if we put an exclamation at the end of level then that should make it uh happy okay so what we're saying is that level is an observable of a string so this is going to be the value of that over time and it's it's correctly telling us in the template that we haven't subscribed to this observable yet got it so the thing in angular that makes that wires this up for us is the async pipe and uh what the async pipe does is like we mentioned before we talked about subscribing to values or subscribing to values or like returning or executing a promise and what the async pipe and angular does is it kind of creates this cycle in our template that we which is a little different than what we did in the other component to where we actually did a dot subscribe and we listened to that value as it was being updated so what we want to do is go to the template and the async pipe itself will do that for us so in the boot level boop level component here uh we want to add here we want to use the async pipe so if we do a space and do the pipe operator and then use the async pipe there yep so it gives us some auto auto complete there so that will subscribe or just say start listening to the value of our counter so if we get to this and this is kind of like let's say the reactive part of it we just we set up something we told it what we wanted it to do and rxjs like i said it can be mind bendy at times but uh in the end we want to say that when i i set up something i do this i want this to happen and so uh and you're like we've already wired it up and this is what uh makes um or keeps angular or it makes angular more reactive in that sense that we're just declaring what we want to happen and then when the data is passed through there then we get some result out of that and we didn't have to say okay if this happens then set this level or if this happens it's at that level we're just saying right let me go through this pipeline so this is fully derived state which i think is is kind of nice and it's it's very clearly derived from the value of state dot boops as opposed to something where you know because because what i feel like would have happened if it had been me is i would have done something like cons boobs equals this dot store you know etcetera to get to get to the to the boops value and then you know more stuff happens and then you know you're you're 20 lines later and then you finally see this piece of logic that's like this.level equals you know boops is greater than five so it's harder to track what's going on this makes it very clear that what we're doing is we're taking something out of the store and deriving a value from it right and i do i do like that i think that's uh that's really nice to um you know and we could even like we could make this this is just an arbitrary value right so i could even we can make that more descriptive yep that'll be just whatever the however you set up the data you know depending on the operators you use uh would be uh how that how that comes out there so yeah definitely gives you that that option to you know be as you know if you want to be verbose with the the variables or like set up your own kind of pipelines there that's more more of what uh where the power and the the the mind bendy part of of rxjs comes in at and this is all just the just like this like i said the state management part of uh ngrx uh we also have we we added the effects package which is just more for side effects but that would be another thing you could do if we were like dealing with http calls and and things like that if you want to do something maybe with the dom or yeah let's let's maybe do that um as a way to just to show how that works because i do think that that is one of the things that i that i struggle with a little bit is when we start dealing with like two concepts of of time flow we've got the data which is a stream over time and then we have async calls happening that don't block the stream over time but have to interact with it um so maybe what we can do here is uh let's i mean we can do something really simple like if we clear a certain number of boops we can uh we can send off a call to uh i think there's an api called like i can has dad joke okay um that it doesn't require authentication or anything so we can just kind of hit it and and get a let's see is there authentication no authentication is required so we can just hit any any dad joke and we get one okay so and if we send that as uh except uh application json we'll get it back as json okay um okay so that'll work for us and yeah so uh effects is a separate uh package like i said that we use for side effects but it integrates it kind of integrates in with the store so as long as before actions are dispatched and those cause state changes but we can also use those to trigger side effects so if we uh going to create a new file uh under uh loop level we can create it there created at the top level folder either way okay let's we'll just put the joke into the boop level component why don't we so that we don't have to create a full other component okay so we can name this boop level dot effects dot ts okay okay so in here effects themselves are similar to uh services so they're just classes but we want to to declare them we want to import the uh injectable token from an import injectable from angular core and this just tells us that this service uh can have something injected to it okay uh so that injectable is a decorator so we do at injectable and uh just call that decorator as a function yep and then we're gonna export uh under that decorator we're gonna export a class or for group level effects okay okay so in here uh what we want to do is we want to inject the action stream so this is going to give us uh to every action that is dispatched uh over to over the lifetime of the application so we want to inject that into the constructor there so if we type in constructor and then we set that one to private we're going to create another private variable there for actions and the convention is use actions with a dollar on the end of it so if you're you know you come across another angular app and it has that conventional it just means that this is a stream of something so this is a stream of action so then we put the colon there and then we want to bring in the actions uh import from ngrx effects okay yep it'll be that one i don't know why that got included twice but we'll okay uh so next we want to define we can start out with the uh defining what the the uh level is here uh or create an effect that listens for all the actions and then we can kind of bring in the state there so uh we can say say you know call or make dad joke uh i guess and we can set that equal to or this would be just a property on the class oh i got you i got you yeah and then uh set that equal to uh create effect sorry so create effect is another like say all these things are functions so it's a function that takes a callback and what we want to do is return uh the act the return this dot actions and so we don't want to we don't want to save this yet because it's gonna it's gonna cause havoc so okay uh so under on line 12 if we after the end of that curly brace we'll just start out with a comma and we'll put an empty object there and we'll set this to dispatch uh false so we'll have a property in the name dispatch and we'll set it to false okay yeah so what what that does is saying whenever this effect receives an action we don't want to pump it back into the store because otherwise we'd loop yeah otherwise otherwise we loop yeah so now if we look at the actions uh we can use an operator on here again or use a pipe on top of the action stream okay so what we want to do is we want to get right we want to get the if i'm understanding it correctly we want to get the latest value from the store and then use that value to determine whether we should make an api call if that is that's right right okay uh so so we're going to get each action and we may be you know a little into the weeds here but we also want to get a value from the store um so we have another operator for that that lets you get the latest value so if you open up that pipe and uh like i said this is maybe one of the the more my bd parts but there's an operator called concat uh latest from and that comes out of rx js it'll be an angry xfx yeah it'll be an indirect fix like the other one yeah that's that's the one uh so you can replace that one the concat latest from uh with that or not concave cut latest from yep and then that one takes a call back okay and so we'll need to inject the store also so we can get that data so if we go back to the constructor and inject the store and then why didn't that inject the store there store service there there it is okay and from here then we'll use that callback to get the latest value from the store so we'll say this dot return and you can return this dot store and then we'll do the select again because we we're just going to keep it straightforward here select and then state wrapped in parentheses uh that's right because it needs to be in any yeah and like i said normally we would have more type safety here we would have more selectors and things but that's at least what we need for now uh so next uh what we want to do is to make some decision off of that so we but we don't want to dispatch that action so we can just make this api call for now so next uh we'll put a comma there here yes and then we'll use the uh tap operator and like i said there's many operators you can use rxjs but we'll just use that one and tap is functional programming which means we want to pull the value out without changing it right yes okay we're going to say whatever yeah whatever comes through there we're just going to use it and and let it go so and so because we got the value of the stores right then what's going to come back what will get passed in is the value of the store which is our boob count is that correct yes well this one actually you'll give you two things it'll give you the action the action that was passed in and the uh and the boop account but it'll be in an array so it'll give you those two things yeah wrapped in an array there okay so next we'll just say we want to and this is where you can define your logic of how you want to uh how you want to make the api request okay uh if you want to do that so can i make this async does that work i no you don't you don't have to make it it'll be you don't need to make it async it'll be sync it'll be just be synchronous at that point in time okay uh so so fetch is async so if i want to like get a response and a way this can i is it okay to make this one async is that going to break everything uh no it won't it won't break anything okay should be able to do that well i guess we don't i'm just trying to think in more pipelines so we can we can try it out but i don't think it'll break it okay let's see how this goes let's have this tap does exp is not expecting a promise there so it will probably yell at you okay okay so i want to get my response and then i mean i guess we can we can just do it as like a promise chain so we can yeah so the so the good part about that is rxjs retire supports promises uh but yeah we can just do this in line there it's just like a side if because this is yeah what we're doing here side effects and then the joke let's go with full response and we'll be able to set like i guess we can just say dad joke equals yeah and this yeah like i said we're just setting this this is all happening like outside of the store so if we wanted to pump this back into the store then we would dispatch an action to do that but we'll we we could just get the response okay here for this one and so if i if i set it like this then um and i guess we can say if boob count is less than 10 we'll say uh we'll just return so must have 10 boops to ride we're not going to use the action so we can just leave the comma there to skip it um and then so we need to oh yeah so we got the effects registered uh but we need to add them or we need to register the effect so that they'll run whenever the actions are okay okay so like i said this is the the mind-bending part the this is we haven't modified the store so we'll need to update the store in order to update the the dad joke so this is happening outside of that loop uh so in order i think on the and i guess in it for an interesting time we'll create one more action real quick and we'll uh use that to uh see we got to compile well so what i'm what i was thinking is if uh it should only trigger when we like increment right or i guess if we increment or decrement uh above the value of 10. right but the the store the dad joke is the dad joke is is not defined in the store so we'd have to put the dad joke property in the store to be able to read it oh i understand i understand okay but uh but yeah we can we can see if we can crank that out really quickly here yeah like two minutes okay so we'll do it really quickly let's go to the actions and in the uh act boop actions right there yep we'll just throw another action in there really quickly and we'll say add that joke add that joke got it and uh in the reducer we'll use that in the boop dot reducer we'll add that that joke okay so in the reducer we will on we'll say on dad joke and uh we'll just we'll set this back or sorry uh yeah i don't think we're gonna we're gonna run out of time because we got to change the state and yeah and oh we can do it we can do it okay so let's do it okay account and then joke yep and we'll set that to a string and then we'll say uh return yep state.count we'll have to return a new object what okay and the in the boop added will return return an object there uh we'll have to return an object or sorry in the reducer we'll return an object yeah we gotta return an object and then set those two values so it'll be return state uh count equals zero and then count equal state.1 and then that joke equal to empty so yeah like i said this is part of like i said part of the what we run into and then in the the boop added we'll also have to update that one too uh to return the count and the joke so yeah that one will be yep state but i gotta make this actually yeah you can probably just wrap that in parentheses yeah there you go okay so that's in parentheses it doesn't like this one does not exist on oh because it's joke not dad joke oh right right right right okay so i can fix all of these huh ah there you go right okay so then we've got on add dad joke yep and then just return we can set this to a value uh return an object and then we set the count will be c count yeah and then joke will be uh whatever we wanted to dispatch from from the store here uh and on line 18 we're missing a comma there oh right for the own handler so whatever we wanted to dispatch it can just be like an empty string or something well yeah it could if we wanted to set a string that was coming from the from the action so we can do that in the action really quickly here or yeah you can set it to a loading but this would be whatever the response that comes back from the from the action is oh i got you so so what comes back from the action is going to be in the boop actions boop.actions.ts yep right we would add an argument on the end of create action called prop props uh so they'll just be import props and so if you type in lowercase props yep and import that and that will be a function that we call and then you would give that props a type of what we want to add to the action so we would just say joke or sorry after props uh we would add right before you call it uh right before you call that method you would do the type there yet or add the sorry add the open and closing arrows got it yeah and then that'll be an object and then we just say joke is uh sorry empty curly brace object and then we just say joke is a string sorry you gotta find it oh yep slap it empty object like that yep and then we say uh ty or sorry joke is a string inside of there okay i understand this is uh yeah we're we're outside like types like that are not my native language um okay so so we've got that yep so then in the reducer now we can say that joker will be uh we'll bring in the action next to the state there next to the state yep okay and then we'll say action or joke is action dot joke because it should give us some complete auto completion there okay and so then up here in our effect we need to when this is done we need to dispatch uh yes so we yeah we could do this a couple of ways you could dispatch i guess any interest a time we'll dispatch it dispatch the ad joke and then send the joke along with it okay so this got stored dispatch and we'll say add dad joke and then we're going to pass in what you'll call it you'll call it like a function you'll call add that joke like a function and then you'll pass the you'll create an object inside of add that joke and then you'll set the joke with the property of string or property of the response so it'd be joke colon colon like because it's an object right okay yeah there you go so theoretically speaking this works well we'll have to why we have to wire the effects up first so that'll be the last the last part so if we go back to the app module really quickly add module yep and then we type in effects under stored instrument we type in uh effects module dot for root or if you still use that same convention okay and then we want to that'll be an array inside of there okay and then we'll use the boop level uh effects or the effect move level effects class so that registers the effects that we've that we created nope doesn't like something okay so let's see let's go back to the serve here really quickly to the which one or the command line i guess we were serving the app and see where error occurs in the templative component boop level component doesn't like dad joke that's because it's not called dad joke anymore it is called joke so in the loop level component dot ts boop level component ts yep we will define a property in there called joke yep and then we'll say we'll set that equal to this dot store dot select and we'll want to remove the string type there so it'll just infer the infer the type for you yeah so we'll see here yep and then we'll use state uh any and then we'll say state dot well this would be state [Music] uh count state dot boops dot joke because we had to change it to an object got you got you guys and we'll probably have to update that okay and then we need to make that one into uh async right yes it'll be in a boot level component yup async pipe there holy crap okay so uh it's working but i'm now ddosing this thing uh what's my boop level oh my boops are now uh level let's see because we busted that um let's go to the component itself the html and so this one is no longer the count it's um yeah you'll have to update it in the it'll be state dot count dot boops this start online 17 state account 17 yeah boops boobs.count account dot boops boops dot count okay so it's still running without let's see let's go back oh okay let's go back again i think we did we take the dispatch false off there dispatch false is here okay it's still there uh okay let's go up to is our boob count coming in does it need to be like boop count dot count yes okay uh because that'll be there we go go up to 10. and okay so it it starts to explode so we need like uh uh we need a an escape patch that like if we've already requested it we would set a flag that's fine we're over time so um yeah so let's uh let's do this and instead of uh this is good enough right like we proved that it works we would need to set like a flag in here that said you know if uh if a joke hasn't been requested and and then do another check that if we go below nine to clear that flag that part's just logic i get that part um but this is super powerful stuff so if somebody wants to learn more where should they go next yeah so if you uh want to learn more about ngrx you can go to ngrx.io we have docs there that show you kind of walk through the whole ecosystem of libraries here we we talked about store and effects uh there are other libraries for let's say if we wanted to do more granular local state there's component store for that and also one's for hooking in with the angular router and managing collections is another one that we have there and even once for if we're if you're managing a lot of collections and you want all that kind of that data wrapped up for you there's njr's data there so we got lots of stuff yeah a lot a lot of stuff that you can choose depending on what your your you know how how much you want to get out of the platform great uh and if you want to ask questions directly to the maintainer go follow brandon on twitter um and let me do a quick shout to our uh our live captioning rachel who is staying late with us today thank you so much rachel i'm sorry for going over um she's here from white coat captioning white coat captioning is made possible through the generous support of our sponsors we've got netlify fauna hasura and auth0 all chipping in to make the show more accessible to more people and make sure while you're checking out the home page you also head over to that schedule we have so much good stuff coming up we're coming back on thursday we're going to figure out how to bring any data source into graphql using steps end with carlos eberhard make sure you come and check that one out click this add that on google calendar button get it out of your google calendar it doesn't uh take your email or anything it's just letting you know when things are happening dang all right lightning round exit uh brandon anything you want to add before we call this one done yeah sure i want to give a quick shout out here we are like we talked about nx at the jump here when uh we're doing a conference uh for nx uh annex conference september 16th and 17th uh you can go to nx.dev conf to find out more about that uh feel free to it's free gotta throw that out there too so feel free to register that ticket if you want to learn more about nx and uh how you can build build some cool stuff with that so definitely check that out excellent all right on that note we're gonna call this one done chat stay tuned we're gonna go raid uh typescript tee time and brandon thank you so much for all of your time today really appreciated it uh we will see y'all next time thanks you

Channel: Learn With Jason

Views: 1,100

Keywords: Brandon Roberts, Angular state management, Ngrx, Learn with Jason

Id: gVOwffv4_hA

Length: 95min 18sec (5718 seconds)

Published: Wed Sep 01 2021