From Redux to Ngrx/store | Julien Renaux

hello okay come on Stan then okay so I'm here to talk to you about redux and engineering store and more speak sorry okay so I'm here to talk to you about Redux and ngrick store and especially most more specifically how to get from Redux to ngrick store if you do not if you do not have a Redux background that's fine we're gonna review it together so my name is Julian I'm a software engineer from salsa friend to lose and I previously worked at eBay in China for two years and now I'm a freelancers working closely with stop down I'm specialised in single page application using angular ionic or react and I'm also a community leader a creator of angular Toulouse meetup that I was really inspired by angular beers so I created this a year ago and it's a real success in the South of France and I'm also a co-organizer of Google developer group of Toulouse so to understand what engineering store is we must first learn where it is coming from and an entire story is it's mainly inspired by redux so what is redux them so Redux is an open source library to manage the state of your app meaning all the data within your app the state is predictable so it is easily testable it has a unidirectional data flow it's always top to bottom it is it is framework agnostic meaning you can use it with angular or react or view or whatever and was created by Dan Abramov and Andrew Clark they both work at Facebook now and it has more than 29,000 stars on github okay great now we know but we ducks a little bit but what is the problem with a conventional data flows so conventional data flow could look like this when your components have direct relationship they can communicate to each other right they can communicate through props to get data in and they can use event emitters to get data out and when you do not have a direct relationship you can use a third-party library that's our party service sorry or something similar to the root scope that we have in angular 1 or pub/sub pattern or whatever so they are there are too many ways to achieve data communication between components and it's not normalized so if we you have several developers working on your application over time you can end up using all of the possibility I just I just quote right and your app is getting are to understand and to predict but with redux that the store contains the entire state of your app it is called it is what we call a single source of truth when the component initiates a change which is the greenhouse air here the store applies this change and let the component knows about it the blue arrows so with the unidirectional data flow all that all your data are of your application for what the same lifecycle pattern there is no communication there is no component to component communication it make it makes the logic of your application more predictable and easier to reason about so let's explore the lifecycle pattern a bit deeper when a component needs to change the state of the app it orders a change by dispatching an action ok that's the only way to change the state in redux to the store then applies this change and to finish the store notifies the components that subscribe to it changes ok so let's see now what's in action and how we can update the store with it so this is an action an action is a plain JavaScript object that describe changes to make to the store the only constraint you have is to be able to identify the action so here we using the type key which is a convention and it has to be unique the payload on the other hand is completely up to you it could be anything and the purpose of this action in particular is pretty straightforward we want to change the username of maybe the current user here so if we go back to the previous diagram we have we can see that there is a missing part here from this action how do we change the states of the app and that's where registers come into place so register or read efficient function is a function that takes an accumulator here total the current value and returns a new value so reduce is only available in arrays in JavaScript right and here we have a one to three array that we would use with the sound function or a register and give an initial value of 0 so can anyone tell me what's the the return value here yeah I heard 6 it is 6 so we have an initial value of 0 and we we give 1 so the results of this is 1 then we have we give 2 and 2 plus 1 is 3 right and then we have 3 plus 3 and it is 6 and if we expand this reduce idea with an array of actions we get the idea of what we Doug's does internally in this case we're going to increment or decrement a counter by passing action to a register so here once again what is the result in your opinion ah fair - yes that's - so we have once again an initial value of zero then we increment by one then we increment in other words at time it's two we decrement it's 1 we increment again it's two so to finish on registers we can say that the register purpose is to apply estate modification does take modification the ask the action is asking for ok so the current state plus an action will enter the register and the register will then apply this modification to the state and and and the register will return a new state so let's now recap all of what we learn with redux with this diagram so we can summarize this part by saying that first the components subscribe to the store to get the states right then the components can dispatch action if they if they want to the register will receive those actions applied the changes and return a new state to the store they're stored then notified the components with this new state and so on and so forth right so you guys are now redux experts so let's now talk about ngrick store so engineering store is a eric jet-powered state management for angular applications it is open source and it's mainly inspired by reduction it has the same purpose as we ducts it's a predictable state management library it is powered by Eric Jess so everything is in observable it also has a unidirectional data flow and this time it's not framework agnostic right so it's only for angle applications it was created by Rob Walmart who worked at works at Google in a angular core team and it has 2.5 thousand stars on github as you can see here Redux and ng rx store diagram or pretty similar the differences are that most actions and the store are streams observables and we keep all the redux main ideas which are action registers store so let's see now how to install these packages so if you use NPM it's the first comment right you can use the yarn as well there is two packages core and store its brilliancy to install and the first thing to do after the installation is to create our store and import it into our ng module so first we import the store module and the combine register method we then import our registers all of them and use the combined register method to group them together this step is really important because it defines the shape of your state for alt compilation to work we need this extra step we export a function that returns the results of the routes register call and this function is call at every new action trigger it's not really important to remember that but if you want a ot to work you need to export this function and to finish we can import the store into our app using provide store so now that our store is ready to to be used I mean is imported into our application how do we use it into our components or services before we can use it we must define its the we must define its create its definition to do this we can use a type script interface in that case at the current user as a user type the users are an array of user and the language is a string that's totally arbitrary I can use whatever you want and once we have the Upstate's interface we can then inject the store provider in our services or components simply by using angular dependency injection okay so we now can use the store so now let's focus on the store API to see what we can do with it so to to retrieve data from the store we use the Select method the Select method returns an observable that we can subscribe to right so here we get the entire states we can get just a slice of the state here we get the users and both lines are similar we can use a function or string and to modify the States we can use the dispatch method which with an action write as an argument so now that we know how to manipulate the states of the app but we do not know how the UI reacts to the changes we make that's why the change detection come into place it happens the changes action happens every time a component class property changes right if you want more detail but the change detection you should check out zone G as for more details so first we want the counter within the template to update every time a change happens in the class to do this we're going to create an observable that increments a counter by one every once again we then subscribe to it and bind the country results to our class property this counter will increase on the screen at this time everyone's ago in one important thing to notice here is that we need to unsubscribe right once the component it is destroyed we need to unsubscribe otherwise we can have like memory leaks right if we forget this so as you can see this is a bit teachers we need to subscribe we need to keep a reference to the subscription and we need to think about and subscribing so is there a better way to do the same as this and the answer is yes there is a better way and it's using the icing pipe here so this example is exactly the same as the previous but with less code and the icing pipes subscribe to subscribe and subscribes automatically to observables letting you focus on what really matters to you the data to display right so angular does the rest and keep in mind that less code is less bugs like I said in the previous example if you forgot to unsubscribe you could have memory leaks now altogether so with this example I want to show you how easy it is how easy the code can be when using an t-rex tour so first we have a template that display a list of users with a remove button okay there is an NG for then we loop there is a button for each user name right the user stream here is an observable that we get from the store using the Select method and subscribe to using the Assam pipe so it's it's automatic and to finish we have the remove user by method that is called when the user clicks on the button and which dispatches the remove user action okay so now that we have everything in mind let's learn about what are the press best practices when it comes to create the States so the state of your app should be easy to understand but most of all it should be easy to use so is anyone here able to tell me what's wrong with this tape what could be better it's not necessarily wrong of what could be better no okay so you I should avoid arrays and prefer object literals why it's because with an array we need to go through all the lists of users if we want to get just a specific user out of it with object literals we simply get the right key so it's more easy and it has better performance once again what's wrong with this example recently okay yeah the point that I wanted to make here is there is duplication right there is there are two references of the same user object right there was the same users and they are in two places so why is it wrong well because they can be out of think I don't think for instance the same user can have a profile picture on a page and another profile picture on another page depending on when you get the data those are references so by the time you get the second reference for instance the user could have changed its profile picture so in your app it will look weird they can even change the name it's it's even weirder so it's really important to keep a single source of truth and it is easily doable using an array of ideas in this case make sense okay so this leads us to conclude this talk on Derrick data so Devi data is a data that is created from different sources of data right so for instance here with this state we want our UI to display a list of trending users right we want to display this list this is a mix of both so how do we do this anyone as a little int we need to use a special Eric J superior okay we need to use combined latest operator so after we apply the combined latest operator we get notified every time one of the source observable emits a new item so their source observable are the two arose on top and after the combine noticed parallel we get an observable with both value right when you have one when when the first one emits one and the second one in its a we receive a one and then to it it's gonna be to a and then to be etc so if we translate this into code we have the following so the first two arguments are our state's observables right that we get from from the store then the last arguments is a function that received the state values and returns whatever you want to return and in that case we want a lists of training users objects right so we map and we return the user instead of the idea okay so let's conclude this talk with interest or you have become fully reactive it will only rerender part of the UI when necessary your state is always predictable from a list of actions you easily can can can guess what the state could be right so it makes it perfect for a unit testing if you follow the best practices I shared with you and they are much more right you end up having States understandable by everyone and with the unidirectional data flow always top to bottom it makes you up easier to reason about so now you know you guys know everything there is to know about ngrick store I hope you guys will use it in your next app thank you very much if you want more more detail about this I wrote a blog post it is there thank you

Channel: hackcolab

Views: 495

Rating: 5 out of 5

Keywords: redux, Ngrx, store, RxJS, Angular, ngrx/store, Observables, JavaScript

Id: mRGB--ZLxa4

Length: 21min 3sec (1263 seconds)

Published: Sat Dec 09 2017