ngAir 153 - NGXS: A New State Management for Angular Apps with Austin McDaniel and Danny Blue

hey what's going on welcome to another episode of angular air I'm your host Justin Schwartzman Berger and today we have an episode on state management a hot topic as of recently well as a good while now and we've got a new approach in the game here ng excess so that our episodes going to be all about that we're gonna be checking that thing out so let's get started I introduce our panelists here joining us we've got Bonnie Brennan with us Bonnie how's it going it's going great how are you doing good doing good excited for another episode so yeah and then are a couple of our other panelists are out today so we'll catch them next week and one of our panelists is actually our guest today one of our guests this guy's gone crazy in the open source world you know we know him for a lot of different libraries that he's created now he's jumped into the state management game awesome McDaniel what's going on how's it going can I be like a guest and a panelist like ask myself like talking third-person and ask myself questions yeah yeah you can be a gue list copyright Jeff cross if you want to do that so yeah sure cool you'd be the coolest today alright and then we our other gas is a Danny blue Danny how's it going hey Justin Bonnie - pleasure being here everything's going going pretty great we are if you can see behind me but it is a rainy miserable day this close to DC and we're about to get a bunch of snow so it's gonna be awesome I like that name Danny blue that's like a 70s song I think I'm pretty sure it does roll off the tongue even playing like football and uh back in school I always got called by my full name never just by my last name so he's stable that's a pretty cool name yeah well thank you cool cool well um we probably know a lot about Austin but we'll get into that too Danny why don't you tell us a little about yourself for our viewers and stuff like that what you got going on you're pretty active and open source as well - right um goes to run young yeah I try to be so I said my name is Danny blue um some people may hear me on the web platform podcast so I've been doing that or quite a number of years at this point I'm a Google developer expert for web technologies you also may have seen my name pop up a lot around things like the angular CLI and issues and stuff there and also an NG packager and then most recently with ng XS so pretty much that's about it just got my nose and a bunch of different things probably where it doesn't belong but uh but fun stuff nice nice in Austin you want to give our viewers a little rundown of you as a guest I like pandas long walks on the beach no I have been doing javascript for about 12 years professionally now I've kind of seen a lot of different frameworks come and go I you know took a latching on to angular probably about five years ago now and have been working with it ever since then I've got a number of like popular open-source libraries in GX datatable I came on the show and talked about that before I'm a contributor on ng x charts I think we had an episode about that before too and you know I just do a lot of different things in the community I'm also on the angular material team so I'm a core contributor there some really exciting stuff coming up in v6 release so be on the lookout for that and yeah that's pretty much it I just like doing open source and sharing you know the challenges and the problems and the solutions that I come up with with the community I see my frequently blog I kind of like go on these like sprees where I write like four and I'm four in a week and then I like go for like three weeks without writing one but I just kind of blog whatever's on my mind in like whatever I'm trying to accomplish thin and I think it's really relatable and yeah that's about it I have a question that I've seen on Twitter a couple times and I think it's the question on everybody's mind when do you sleep yeah I know right like it's a couple different people have asked me that actually I'm like guys I sleep a lot actually pandas sleep a lot they take a lot of naps I probably sleep like nine ten hours a day it's important important brush I don't know about that I think it was last night I was getting ready to go I was getting ready to go to bed and I've got Twitter messages from all so you'd be like hey I want to do this thing that I need to show you it's like that's good that's gotta wait it's gonna have to wait go to sleep past your bedtime kinda nice alright so before we get into this library right state management maybe we can just kind of give a quick refresher what what are we talking about with state management and why what are we trying to accomplish and yeah I guess the concept of state management in general in terms of yeah so first of all like state management is not a new concept right like it's been around for forever and in angularjs well in react like they have this whole like flux architecture that Facebook kind of proposed and one of the implementations of the flux architecture is a really popular library called redux that kind of does global state management with the mutable state stores and it's a really clever approach it kind of takes hints from CQRS pattern just command query separation which is popular server pattern back about ten years ago actually um and you know it when we're building complex applications we can't just be stuffing variables in our in our components like we used to write like we need to like orchestrate a little more like conscious state management especially when we're sharing states across multiple different components when you're dealing with the mutability it can be difficult to you know have a single source of truth and make sure that like mutations are done in the correct way and so on but with that said most I would say that about 50% of the people that are looking into redux or in grx or something like this library probably don't need it and this is something that Dan the creator redux has actually said is like don't bring it in until you actually know that you need it and I think a lot of times it's really easy for us to see shiny object right like the dev tools are so cool like I can rewind stuff and you probably don't need it if you just have like an app just some forms and stuff like that you're not really sharing data like it's gonna cause you more trouble than what it's worth I feel like I actually have a question on that I've been thinking a little bit about that like the don't bring it in until you need it well are we really talking about the the framework the the library and all it it entails the boilerplate and all that stuff is that what we're really adverse to in terms of bringing in for you needed or is it like the actual concept of what you're trying to solve like if you think in terms of I've got two components that live in different locations and I need them to communicate in some way with some data you know that that's fairly common thing that arises pretty quick in an application development like couldn't that be justification for saying I need some type of state management sort of thing so I personally think that you should pass properties and callbacks or events in angular as long as you rece realistically can before you start introducing a bunch of you know like a new rack will become like connected components or stuff like that before you start wiring up this big state management system not not necessarily big before you start wiring up a state management system you'd be surprised how far you can get by just having intelligent inputs and intelligent outputs with with you know like says sometimes you can build entire applications with your route component everything goes on everything goes through your component tree and you can just pass all your state up that way and then everything passes a chain it's changes up through events and then back down you can get a really long way just doing that without introducing an outside mechanism yeah I think the the thing is like when you start you know you're that example right there right when you start having like 15 inputs that you're starting to pass down and it's starting to get tricky to like orchestrate to like components different levels in the tree right - like populate those up and maybe you have like 10 events that you need to populate up right when you start getting this complexity right like you're probably your first thought is I'll just create a service and I'll put a behavior subject in it or something like that and that can actually get you really far as well before you actually need something like a state management system but when you start seeing yourself do that over and over again and you you know you see some of the things you see these patterns and like you're starting to build a more complex application that's when it certainly becomes evident that you know you need to really you know investigate state management system invest in it yeah I think those are very good points I think that one thing that I run into a lot with is it doesn't take me long with the pattern of component development and things like that like if I have a parent component and I have a child component and I got inputs and outputs and I'm sending that stuff through feels good but the whole component system makes me feel like I want to be able to break up things into smaller components and work with it right so I want to be able to take that child component and break it up and maybe nest some more levels now at that point but as soon as I do that I feel this friction because now I've got to play the chain of passing down inputs or passing up outputs and and wiring that up and I feel like I immediately get into this okay if I had a solution for state management Andy and I would say that even the the simple service with the behavior subject is a form of state management across these things right so I need to solve that so that I can still be feel good about breaking my application up into smaller components and not worrying about the componentry dictating some of my flow of that stuff right so it almost feels a little bit like I want to have some sort of solution for components talking to each other beyond just the inputs and outputs right but I don't necessarily want to take on all the stuff that comes with some of these other state management things right I don't know it's kind of one of the things I think about I think um you probably refactor too much Justin no in all seriousness that that is one of the things right like but that really doesn't happen until you start creating a very complex component tree and you have a big application right like I just have a farm with some inputs and stuff like that like it's not really you're not really gonna be doing that right so I would say that like when you start hitting that point you want to start breaking these out you probably have a pretty complex component tree and it makes sense to start thinking about state management okay so so what do I get Minh with this like advanced state management this complex state management that we're concerned about like taking on on right like you talked about the CQRS and communication between components maybe some of the other stuff that comes along with that I think Bonnie had something what were you gonna say Bonnie I was wondering when you're making this library especially when you decide to open source it and share it with people right do you ever have like a moment when you're like oh my god I've made a terrible mistake like like something came along that you didn't think about and you and now you have like especially when other people come on and use your library like that's pressure isn't it I see you this free unit test and make you a right I like the open source everything that I do right I want to share it if I can so I can get that validation right like I find it great like sometimes I just go crazy and just like write something and I think it's cool but if no one clicks the start button on github maybe I did something wrong so are you gonna show us the code hey guys show us what it looks like we'll get there Bonnie we'll get there putting the horse in front of the carriage the question and every developer show me the code so we got a couple things to talk about before we get there um so Justin you asked like you know what was your question again actually my question is you know we talked about get to like a behavior subject and service to kind of solve some of this mini state management between components so but what what are we getting with these larger state management solutions like what are the other things that we're solving by taking this on right and what do they do Danny wouldn't take this one sure so in the same way that I just said that you can oftentimes be surprised about how far you can get by just using inputs and outputs in your components it's also fairly easy to get yourself in a hole if when if you do to start so say you run into that exact situation you're like okay I'm going to add a property on my class that's a behavior subject and everything listens to it's always going to get updated now you have to you and your team potentially have to adhere to a certain set of rules to make that work and so then you start saying like okay well I'm weird how are we how are we go update to stay okay well if we're going to this state we're always gonna do this we're always going to make sure that it's immutable maybe we're gonna pull in a mutable chance or some other library to make sure that stuff stays stays relevant you end up making it's almost the same way with going with any other framework you could you could write you could do all of this without angular without ng FS without all of it but you a lot of times you just end up writing your own libraries and your own frameworks on top of it and sometimes that's what you want but a lot of times you want the pros of going with a library which include things like it's being tested it's being used by other people not just you so it's more likely there will be scenarios that are already accounted for that you weren't thinking about or different organ ama that you didn't even know we're possible so for instance if you're not super familiar with how to write decorators and things like this it was like oh well I would have done that but I didn't know you could and now when you have a library that does it it helps you out with some of that stuff so again to kind of go back in the same way that you can get really far with just with just inputs and outputs once you decide that you need to take the step in that direction you would be you'll be surprised how complicated it can get if you're not being careful we're on the note of complicated let me just say like there's a lot of articles out there that say like oh I wrote Redux with one one kind of rxjs code that is true you can do that but it doesn't do anything this was you know before I started creating this project I was I specifically avoided making this because I knew it was going to get crazy with all the scenarios and I spent a lot of time like playing with different ideas and great III I was in in fact even wrote a couple of libraries that were on top of ng rx that really allowed me to still keep in gr X and take advantage of that but the more that I added on top of that and the more things that I wanted to do I ended up well this is ending up being more of a hack and it's actually being beneficial for me because state management is really complex it sounds easy just like setting some properties and stuff like that but some of the scenarios with like sub States right like that's a that gets into like dependency graphs and things like that and it gets really crazy really fast really simple stays really simple after you go beyond simple you can start getting yourself into a bunch of trouble so it's at one point you you were working you were trying to work with and grx and kind of get the special functionality that you wanted without so when you decided like to just go off and do your own thing was that it was that a difficult decision for you like what what made you what was really the thing that made you make that decision yeah I think I posted a blog article this weekend that got quite a few like feedback on and I think like they're basically like outlining the reasons why I decided to do this and and like I said I really I want to build on the ecosystem I don't want to be that guy that just creates another JavaScript framework right like we already have enough of this in our life enough fragmentation enough libraries that we have to learn and things like that and so I really wanted to avoid that and just enhance it but you know at some point you know I was starting to build on top of it and I was starting to run into scenarios where I just flat-out wasn't going to be able to do what I wanted to do and at that point I started like weighing you know what I was trying to do in like retrospect - what in grx was actually providing me and at that point I was kind of like I'm just gonna you know start this and we'll see where it goes right type thing so I mean kind of talking about getting back to like why you know you know that's question that a lot of people ask me like okay like you know in grx has its proper it has like its downfalls in terms of like the boilerplate and the things like that and really I was trying to reduce some of those and kind of imagist like why I actually created this was in grx and Redux in grx is based on Redux and Redux is really built for react all the concepts around it like pure functions and those agronomics are all centered around how react works right like react prefer assumptions or classes right there's no dependency injection and things like that and so I really thought that I really wanted to take a step back from that because I would I asked myself I go if I were writing an angular app and I wasn't using Redux but I actually have a pure function with a switch statement at all and I think I asked you that Justin you're like I don't think I would write it like and so that's not really like the code style that we write when we write angular apps we don't wrap your functions we use dependency injection we use classes and we use decorators so what I wanted to do is I really wanted to rethink you know I played around with a lot of different frameworks like mob axe Redux UX I research CQRS patterns for the server and I really played around with a lot of these and I I kind of ended up back in the same you know I went in this circle and I kind of ended up at the back at the same point where I really like the Redux pattern I just don't like some of the things that are around it and so kind of talking about those switch statements like that trust me like I understand like why they're there but they drive me bonkers right like like it I'm just like why can't we just you know have a class or why can't we just have like an object or something that we put our expressions on and so those things drive me bonkers they always have from the first start you know another reason like why I went down this road is I wanted to create something that felt more like it was designed for angular I wanted to create something that used classes that use decorators that use dependency injection all the things that we use today I wanted to rethink Redux for completely rethink it for the way that our Argonauts of angular are and kind of talking about some of those economics right we have dependency injection we use it everywhere in in our applications and relax react land there is no di so if you're in a reducer and in react you've got like this service locator pattern where you can just import something and use it right and we can't really do that and so having the ability to put you know use the pendency injection with you know some of our reducer functions and things like that some people would argue like they're supposed to be pure functions but at the same time like we want to try to author like reusable code and reusable code like comes with functions you know maybe they're just maintaining a class but we want to reuse it in multiple places so that's where that kind of comes in and I think the big some of the biggest things that everyone you know complaints about is boilerplate hell right like in your typical like Redux or in G or X setup you have actions you have effects producers and selects that's for files that you know while they're not big files it's four different files right that you have to create every time you create a new smart component and these are all kind of dealing with the same thing they're all dealing with a state container whether that's mutating the state directly or reaching out to a service that mutates the state what I wanted to do is I wanted to try my best to reduce all this down into something that was a little more simplified for like state containers and things like that and then there's some other reasons around like you know using spreads all over the place why can't we let the framework handle that using promises with instead of observables and but one of the other big ones that I kind of feel like is ng rx effects or and Redux observe which is kind of the same thing it's an awesome approach to an event stream but they are painful as hell to construct read maintain and teach other junior devs about them right like their third simple thing can end up being really difficult and I wanted to try to simplify that as well so those are kind of the reasons why I'm we're down this approach of course it did when are you gonna show us the code and tendinitis show us I don't see it Justin do you have any questions about that though I mean so it sounds like a lot of it is reimagining the the ergonomics and the user API right of it that you're trying to solve you said look I want to I want to make this more of an angular type of experience and what would that API look like from a user standpoint to implement state management right in our angular applications and then still be doing this the state management pattern but also some additional you know tweaks and changes I think you'll get into that as you show the code I've seen it before so I'm gonna we're talking about it but um but yeah some of that stuff you know you talked about with with kind of effects concept and some elements where you want to provide a different approach to handling that segment of state management right yeah I think so I think that you know and a lot of these are just my opinions right like I'm not saying that like the way that in grx does things or redux those things is wrong like they're very smart people they know what they're doing they they have a great problem and they made a great solution I just have a different opinion about some of the ways that I would you know solve some of these things and and that's really where this comes from so what about the name like ng XS right and we've got ng rx and and so it tell us a little about that yes so the so about two years ago I think it was now like I started this trend of naming everything in GX and a lot of people are like like that's so confusing but I named like all my libraries in GX - whatever right it's because I used to have them in G - right and then in g4 came along and it messed all those names up and I was like what am I going to name this now I don't want to name it in G so I came up with in GX and so in GX s is like in GX plus state s per state and that's it I didn't like try to copy anyone or anything like that like it does it is confusing because it is four characters and it's really close to in grx but that's that's where the name came from okay I got a really important question are all the letters capital is the n capital and the excess capital like how's that look that's a good question maybe maybe you should submit a bug for that so we can figure that out what your logo has them all all caps right so I'm assuming that's the case I kind of feel like if it's all caps it's like I'm yelling it maybe that's a good thing though yeah alright so do you want to demo some stuff show some people about like actually I don't have any demos set up just kidding barking you have to show us the code you can't come and talk about the code in that show us the code that's not allowed all right all right all right okay so let's look at let's first look at what I'm going to do now I've got this like simple to-do app right like I can come in here and I can add to Do's and I can remove to those if I added to do the Panda name a panda emoji comes up down here for every time I add one and there's like some detailed state stuff but that's mainly just for testing so yeah that's pretty much app is really simple it's just like a basic to do with add and remove but I want to show you I wanted to demo this simple code so that you can like not focus on a lot of the like extra stuff we really kind of focus on the economics of you know just what the basic you know thing is and also real quick before we get into it for anybody else that is watching this is the app that is currently acting as our integration test for stuff so if anybody wants to see it and play around with it if you clone the repo it's in there under the integration folder yeah just clone the repo NPM install NPM start you get this app so let's take a look at what our state definition looks like so if I'm going to we would probably call this like a reducer right if I'm going to define a state this is this is basically what this looks like it looks like angular code right like we've got decorators classes all this stuff so we have this decorator that's called state and in this state decorator you pass the type of the state this state is just a string array then you pass the name for the state and this is the name that will be in the like global state then you can pass some defaults in here right right here right so I could like make this like panda and then if i refresh it and it's going to show up there automatically for me it will start it off with empty don't worry about this right now we'll get into that so we've got two different actions here so we basically in engineer in GXS everything's an act you're just emitting actions so I've got an action called add to do and I've got an action that I call remove to do and that action has two arguments one of the arguments is the state context so we have this get state and set state and the reason why these are get state and set state instead of just like passing and returning the state is because we want to make sure that if you are doing an action right and you were to do something a sink that when you get the state it's always the freshest state so we have this function that allows you to get the state and set the state and this allow you to like actually set this in any type of control flow within your action and there is no effects right if you're doing asynchronous things you just do them within an action right like that's the kind of service and if we return this it'll automatically subscribe Forest and then I need I tap now then I can say this card's not right but you get the idea so this is one of the big differences between normal Redux and are normal but standard Redux and this pattern that we kind of that we came up with is that when normally in redux a single action means a single state mutation with ng excess that is not necessarily the case a single action could potentially update the state several times which which we did in this case specifically on purpose so that might that actually might very specifically be something that some folks don't like but that was a conscious decision that was made when designing the API it's crazy yeah you guys are nuts and you know there are like downsides to that approach right like if you were to like replay the dev tools right you're gonna see like one state mutation for this entire function but that really depends on the architecture of your actions right like you don't have to do it right like this you know you could actually make it dispatch another action here and then have another ad to do success right but you don't have to do it like this and it really just depends on what you're doing right like if you're just setting something is loading and then you want to reach out to your pandas service and then set the state right like having two different actions for that specific thing just feels a little redundant to me so I wanted to like simplify everything and just boil it down to something simple where if you're dealing with the state right the state is always in action and the action can get and set the state and then whatever you do within that action as long as you're still working with the state I think it's a valid operation now one thing not to do with actions and I say this in the documentation is like don't do like don't do like view specific things like you do within grx effects right like this state is this state right like do things that resolve around that state if you're gonna show a dialogue or something like that there are different ways to approach that we want to try to keep these this state container to be pure to just dealing with the state so I think really quick to recap like what's going on here right you've got this action decorator and GXS is providing right that you're decorating a method inside of your class so we set up this to do state that's gonna represent your to do's and your decorating a method add to do with this action and that is going to get a call and dxs is going to handle calling that and sending in the state context right then you have everything you need to work with inside of there that's correct and and for the most part right like your your actions should be pure right like you don't really need to look you know don't do things like this like shouldn't do things like that and some people say like you know well with you know redox pattern with the you know secure functions right you really can't do that but you actually can't write like you just set up right like you just set up variable in that closure right so that's not true right and so some of those same principles still apply here right like don't do silly things like put state within your state within your state and they look really cooking that that decorator that action decorator you're handing it and add to do type or what is that so add to do is a action so very simple it's a class yeah yeah sorry it's a it's it's very similar to what you would see with dispatching actions and something like integer X so I've got a class here that I say add to do and then I just say the constructor is a read-only payload of the name of the to do now you'll notice I don't have any types here or anything like that that you you know string types like drive me bonkers in code and so you'll notice that I don't have any types here or you know type strings here so the reason why is because if we're dispatching a class we can actually read the signature of that class and do that match up for you so you don't even have to define that so it just uses the class name to symbolize and do the matching of the functions for you such a rebel by the way one of our Watchers on YouTube Jay the showi says he likes your new haircut my what your new your new hairdo because I suspect it's because he has the same hair D because I saw his picture online so thank you so let's get back to the component and take a look at what we're doing in this component to actually like trigger those things to happen right so we've got a ad to do that's got a placeholder that says new to do and when we click it we're going to pass the text we're gonna call a function and then we have a list that's going to iterate over each one of the two dues observables and I can click remove to do and it's going to pass the index for me and then also down here we have another observable list that's going to loop over the pandas and throw up hand-on mochi so if we look at what the ad to do it looks like it's pretty similar to what we would see in like in jar X we inject the store add to do is going to dispatch a new add to do and the arguments is going to be the to do and then the rest is black magic it just knows how to match it up and do all that type stuff for you instead of using you know this store dot select we actually have some select decorators here so I can actually select out the state and one of the cool things about this is because we have classes and those classes have signatures metadata associated to them for your select you can just pass the class and it will return you out the state for you so you don't have to say stay dot - dues where I you know state into state dot - dues right you just give it the class and then can do that for you now you also notice that I have this other thing called to do state dot pandas and this is actually what we call a select org and this is a static function that will pass the state and that's the state of the do that's not the global state it'll pass the state of the to do and it will actually like filter that out for me so now if I want to only show my pandas to do state not pandas and I've got a very nice mineralized selector there for me and so that that actually is a key thing the reason because you could just do that with a function you can just pass a function into that select decorator but if you do it this way with the select with the select or decorator the results will be my eyes and for anybody that doesn't know what that means that means that given the same in the in sense it's a since this is a pure function you can use the inputs kind of as a key to the the output so you can avoid having to redo some of the same work when if you're lazy loading multiple modules can it handle that absolutely there is a for feature this alone yeah so there's a there's a for root there's a static for root method on the main module and then there's also a for feature module which to be used for for lazy loaded stores or state classics so the to do store might be only one store and you might have more stores yeah and this in this use case I've actually got more than one store so I've got this one this to do is actually a sub store which is a fancy word for just like nested like stores so I actually have like a parent to dues state and then within that parent to do state I have a child that is the to do state now when I look at my app state you just define an app state and you say here's what the app state interface looks like and here's the states that are within it and then in my module in my route module you just say for root and you pass those states now if you're going to lazy load that freaking prettier prettier drives me bonkers if you're gonna lazy load that would say injects module for teacher and that pastor sub-state means on and so I I also feel like we should we should go into what some with that um that sub state feature is um a little bit more I don't know if you want to do that right now but there's also a good example in the docs that we can also that we can also point to for how that what that looks like so pretty much it's like what austin said you can declare children in your in your state decorator for other for other children and at that point there you will have a new property but that that property is being updated by this by an entirely different state class which is which is pretty cool speaking of the docs can bring up one point real quick yeah so something that's different here is that you're a user is defining their state graph by creating these classes and the decorating there with the at state right versus say like I'm not writing an interface somewhere and maybe an initial state somewhere that kind of is my mental map of creating my state you know graph I'm doing that in these classes right in these classes and that's when you get to the sub stuff you kind of talk about you're kind of building that out with that right is that correct yeah and I think this should feel familiar to people though because this type of syntax was actually inspired by the angular router syntax right in angular router you have you know top levels and then you have children and those children refer to other routes and and that's kind of what this what this syntax was actually inspired by we went back and forth on a lot of different ways right but there are some limitations around providers and making these injectable and äôt that kind of prevented us from doing some of those things so with before we move on all of your states are actually you can inject something into them you know all you have to do they're automatically set up we need to find them in your module for dependency injection and you can just inject whatever you want and to them just be you know conscious of what you're putting in there so they're asking on YouTube the redux debugger is compatible oh so in order to out of the box we have three different debuggers or three different plugs so we have this entire plug-in API that allows you to create your own plugins right you can create services and you just say this is a plug-in I can inject my own options right you can provide your own action actions and then there's a handle argument that passes you the state the action and the next function and then the next function allows you you could change the state entirely change the name of the action that you're passing I see a typo here but and then it returns an observable to you for the results so there's a lot of flexibility here to create your own plugins but out of the box we have a basic logger plugin yeah the Redux dev tools plug-in and we have a local storage plug-in and so if I come back over here did you do I didn't sacrifice anything to the demo code today oh yes it worked I access surprised um I come over here and they have more questions on YouTube looking at a minute you can see that our list here now has been yeah I can remove that you're gonna see remove I don't know why it got fired twice here that's probably a book this book it's the book that we just fixed I think I thought I fixed it already but okay anyway I was fired twice whatever still a work in progress but yes it does work with the dev tools we have more questions do you have time from you take me up let me let me get through everything recording okay speaking of that documentation one of the big things in order for people to like fully know how to use this the correct way I wanted to make sure that we have great documentation so if you go out to the repo there's documentation around the entire concept what you should do advanced scenarios whether that's lazy loading substates caching pub/sub composition composition becomes really easy because it's just inheritance because we have classes how to deal with error handling you know how to use to unit testing there's even a style guide for the way that you should name things so extensive documentation was built around the this this project and I'm really proud of that one last thing before I move on one thing that I kind of do a lot of this is designed around CQRS but one thing that I kind of do that kind of breaks that CQRS pattern um but I feel like it's totally worth it because it drives me absolutely bonkers is the ability after I dispatch an event to actually subscribe to when that thing happened to when it finish one of the things that you deal with in like Redux and in grx is trying to make everything reactive and in trying to do that you create like a lot of these like pseudo properties now don't actually really they're not actually anything state right like you're just flipping something just to flip something so that you can react to it in your UI right sometimes like I save a model I just want to set my forum to be pristine but I don't want to set it to be pristine until that's I saved and was completed so the ability to subscribe to this does break that pattern but I will note that view X does do the same thing which is views state management system the ability to subscribe to that now the result of that subscription you don't get any results because results because this removed to do could have fired any number of actions and who knows what this state is so if you want to take the state right like you can always you know pipe and and select that your state and get it right here but you do have the ability to do this and I think this is an incredibly important thing that I really think adds a lot of value in terms of like building practical applications yeah I see that as a benefit to you know make it more approachable right to solve those problems without adding the complexity I think one things you think about is okay if I want to dispatch to remove and then I want to handle the UI and then when that's done do I need to create another property in my state somewhere and actually reduce so that goes along with that just to wire that up this subscribe allows you to get to there without doing all that work right but at the same time you could still do it the other way as well if you need to correct all right Bonnie ask your questions I'm putting them I actually just put them in the Hangout slack there was one from Porter wit Puma who said what about computed value which is derived from another state value and there are some more I'm going to paste them into the chat when that just being merge man J wants to know is plug-in similar to meta reducers do you want Danny want to take the one about computer values um so I would so I was I was looking at it and I'm trying to figure out the to turn exactly what he's talking about Casilla so it kind of sounds like a computer value derived from others they that kind of sounds like what we were just talking what we whenever briefly before about child states I don't know for sure if that's what if that's what's being referred to in this case but that's kind of what it sounds like but if you have a property that you want computed from a different state class you can do that you just declare that state class as a child of another one and then that property will be available they'll probably be available in the state but it will always it will get updated from everything will get updated from from the other state class what are some give us a give us a couple more real quick once mine actually I think Justin said we're out of time or we're almost out of time let's do the there was one more in there are plugins similar to the meta reducers uh kinda but they're different at the same time they're more like Redux plugins and I wanted to make them more like redux plugins so that we could actually leverage the Redux community and ecosystem so there's actually an outstanding issue it's not hard to do I just need to find time to do it where create an adapter and that should be really should be pretty easy to do and then you'll be able to tap and use any of the redux ecosystem that's out there which is pretty huge yeah it's definitely a different you know vision for the API I can certainly see there's a lot of presenting you know it feels like lighter to get up and going right I think you're accomplishing that in terms of making that API a lot simpler to get / going with state management and consuming it and that sort of thing that's very interesting we have time to mix yeah any other last things you want to add to it before we hit the thumbs we're at the top of the hour so probably given two picks and wrap it up yeah so I mean I just showed like a very simple use case like I'm said I'm really proud of the documentation there's a lot of cases that we cover we actually cover in the documentation the project's still evolving right like we're making a big push towards 2.0 right now we're trying to wrap it up or there's only a couple handful of bugs left before we release 2.0 and then we already have you know 2.1 plan for cancel cancel bubble actions and Redux step tools replay and things like that as well as a lot more plugins add I want to create a rich plug-in interface there's a lot of plugins I've actually written for in grx that I wanted to pour it over and and have those in this ecosystem but overall like our people you know it's still pretty new we're still ironing out some you know minor details but I'm really happy with where we've landed on this with 2.0 I think we've got you know I've actually implemented it in a couple of like larger applications now and feel really you know confident about how it works and that the ergonomics of it and things like that so I'm really excited for the future I'm disappointed because my friend Mike rocky couldn't be here today and he offered me five dollars to try to mess you up and everything I came up with you had already thought of and now I'm not gonna get my money so whatever no but it's seriously it's really cool though we're just giving you a hard time Rocky's not here to do it so so Austin you're gonna be at ng-conf Danny are you gonna be at Angie calm I am NOT I'm in the middle of a of a pretty big push at work so I'm kind of lockdown lockdown to a home base for a little bit one of the two will be there so if you're going to ng comp you know hit Austin up while you're there if you want to talk to about ng XS right I'm sure you're gonna be ready to talk Bonnie said she's gonna make me some stickers I got you on the hook now Bonnie yeah for sure cool awesome and what's the best way for people to find out about ng XS just google it is it hot now there's someone that has a stock ticker in gxs those losers uh-huh but if you type in g XS get up you can find it pretty easily actually I just I can ng XS and it came up first get home whoever owns that company is gonna be mad at me now go all right let's get some pics and then we'll put a bow on it Bonnie do you have any pics I have one I don't know if we've mentioned this before I think actually we did mention it last week but I want to throw it out there again because I'm pretty excited Alyssa is helping with the diversity scholarship for Angie comp and she set up a YouCaring link so that people could donate and I think it's really awesome and so I want to give it another shot out we only have a couple weeks left yes definitely people should check that out and consider if they can call all right my picks are I just learned about it from the tweet this bash curly braces expansion I come from a Windows environment a long time windows user so a lot of PowerShell and stuff like that is still kind of doing a little more bash recently but the ability to do like you do the touch command to create a new file you could mean that file you know index dot and then you use curly braces and do HTML comma MD curly brace and hit enter and it'll create both of those files for you with those two different extensions so I don't know that was pretty cool probably around for a while everybody's using bash is like yup whatever so whatever but that was one way Thanks the other one is the chrome dev tools tweeted out about the function monitor events that you can use in the chrome dev tools to wire up to a selected targeted elements like here in chrome dev tools and you you select an element in the mark markup you can use dollar sign zero and that'll be the selected element so you can call monitor events first argument dollar sign zero the one you have selected second argument the string name of the event like click and then as you click in the UI you'll start getting an output of those events in your dev tools so that was pretty cool those are my two picks Danny do you have something yeah I do so I have two I have one that's relevant and I have one it's not relevant at all the the one that is relevant is there is a really good book called rocking algorithms that one of these I bring it up as it is on sale right now on Amazon so you can get it for like under 20 bucks I think but if you do not come so if you're like me and you did not come from a computer science background it gives it goes through a lot of pretty basic things but it teaches you about Big O notation and binary sort and a bunch of stuff that you may not be familiar with and it does it in a very approachable way they in a very readable way so I highly recommend it and especially now because it is on sale my second pick is just another book that I am reading and it's a graphic novel called head Locker which is it pretty much about exactly what the title is but it's very very good and it's very entertaining so if you're into graphic novels head lopper nice all right awesome yummy picks uh I there's a show I really really love West's world on HBO and the next episodes are like coming out in the next couple weeks I'm like so excited so West world is my pick if you haven't seen it it is an amazing show nice isalean not only does he sleep he watches TV apparently too when do you find the time Andy has a dog that he takes care of and walks and all this stuff and that's crazy he just looks like he's working hard it's all a trick alright that's a wrap for the show today uh thanks Danny for coming on awesome coming on and sharing this library you you're working on a real exciting thank you thank you very much I was I was thrilled to be here awesome maybe we need have you come back on Danny for your own episode to talk about different topic if you'd like I would love to awesome right he's good at unit testing out here have your people call our people have you called me and we'll figure it out all right next week we've got an episode on rxjs with Tracy Lee Ben lash and Jay Phelps is gonna join us so it's gonna be pretty hot just like this one so make sure you tune in and should be good all right catch you later thanks back

Channel: AngularAir

Views: 6,480

Keywords: angularjs, angular air, angularair, angular2, angular 2, #hangoutsonair, Hangouts On Air, #hoa

Id: rkn73khwfWU

Length: 60min 11sec (3611 seconds)

Published: Tue Mar 20 2018

Reddit Comments

[u/zintjr]

Is there a specific reason why there must be a class definition per Action? At first glance it would seem like a standard Action class that has an actionType enum property and an optional payload property would suffice most use cases.

I know NgRx takes the same approach and I've always wondered what is the underlying reason for that. Thanks and good job!