Introducing Valtio - Short Subject

welcome to this blue collar coder short subject on valshio a new state manager for react i'm jack harrington at jahr on twitter so what's a state manager and why would you use it well the state managers we've been used to so far are things like redux and mobx and a lot of people have been migrating from those to like a use state use context solution but then if you don't have that global state manager you kind of got to wonder well is there something lighter weight that i can use that still allows me to share data between components and that's where solutions like zustand or joetai or recoil or now valcio come into the mix i'm really excited to bring this one to you let's just jump right into it okay so this is the valshio github page and it talks about how to use it we're just going to kind of jump right into it but if you want to know what the word means let's go over to google translate type that in and it detects it as finish and says that it's finished for state which makes a lot of sense so the way that we're going to try this out is we're going to build this weather app it's got a high level component that has main in it and it's got a search section over here in the light blue and then a city section over here in the light green got a nice little get weather function that you can use that goes and uses graphql to go and get some weather information we're really not going to dig down into the details on that one we got cities this is going to show not only the cities that we've added as well as the average of all of the temperatures of those cities kind of cool we got our search section over here it's got that input field as well as a button to add a city and then it's got this which the weather result which is formats some weather it's not that big of a deal but before i get into that what i want to do is call out what i'm looking for in these new state managers and that's a couple of things so i want to be obviously able to manage shared state i want to allow for subscriptions which means reacting to changes from a react context mutation meaning that it can change state from a react context again i want to be also able to do that from a non-react context i want to be able to add methods on that global state so that you can make kind of larger business logic level changes that might change across a whole bunch of fields i want to be able to do derived data so for example the average temperature would be derived data from all of the global state and then of course i wanted to optimize re-renders meaning that if something over here for example the cities change then this component the search field shouldn't change necessarily things like that that's these are the key elements that i'm looking for in any new state manager so as we go along we'll be kind of filling in these check marks if valgeo lives up to our test so let's see if it does first let's bring it in and now we don't need to make any changes at all no providers or anything else to use valio which is actually really cool kind of right off the bat so we're going to do next is create our shared state store now to create the shared state store we bring in a proxy function from valio now because i'm in typescript i'm going to go and create an interface which is going to define what our store is going to look like and at the moment all it's going to have is just city in it now to create the store i just use proxy and then i give it the initial value and then i export that okay so looking pretty good so far so now let's go over to our search component and go and support this now i don't want to use proxy here i want to use use proxy and then i want to bring in the store and now in the component i just get a snapshot of the state and give it the store still looking good no problems over here let's go and now set the value of the input to that city the only way to check it is to add a new value in there huh all right looks pretty good so let's check out what i want so far and see how we're doing so we can manage shared estate and we can allow for subscriptions now we need to allow for mutations so to set the store you just have to set it okay so let's go over here we can allow for mutations now the next thing i'm going to do is allow for global methods and that would mean this adds city button i'm actually going to go off and add the city along with its weather to an array of cities in their weather which we'll put over here into cities so let's build all that out first thing i need to do is create an interface for the city weather and it's gonna have the name of the city as well as its weather and now we want to have an array of those and we need to initialize that to nothing and finally we need to actually implement add city so let's go and build that method we're going to make this an async function and we're going to await the weather and then use the current value of city from store now if we got weather back let's go and add that to that array we'll give it the name of the city as well as the weather we just got back and finally we'll empty out the name of the city okay the last thing to do would be to hook it up to this button let's try that out okay well one more thing to actually do and that would be to go over to cities and display it all right let's try this out nice looks like it's currently 75 degrees in miami that's awesome let's see how it is here uh yeah okay a little bit a little bit cooler here at 49 degrees no problem okay great so a little formatting weirdness you know with the extra numbers but that's fine so let's see how we're doing on our what i want so subscriptions from non-react haven't done that yet mutations from non-react for sure because this guy now mutates the state just again simply by setting it we allow methods on the global state yep absolutely that's add city that's great and now really quickly let's just show you how subscriptions work from non-react all you need to do is bring in the subscribe method i'll drop that down here subscribe to store and then just console log if anything shows up and now let's try that again and we can see that the stored traxxas changes nice according to the documentation you can even do stored out cities if you like and only see when cities change really up to you okay looks pretty good so now let's go and do this average so we can show derived data from the global store there's a couple different ways to do that i'm just going to go and add a method to the store itself all right let's go back over to cities and then adam city excellent oh okay well i should actually average it hold on over zero is not a number there we go nice awesome so let's now go and look for our last one which would be optimize rerenders and see if that actually works so we'll save everything out open in a new window and if we go over to the inspector we'll bring up the components and now highlight when any updates to the components render so now keep an eye over here as well as here when i add a new city you can see that only the affected elements over here change pretty nice actually we can do one less thing here and really show it off so if i just keep the name of the city around then only that will update so let's go back over here again portland and now you can see that only this side changed as the new data came in so really clean nice atomic updates pretty much everything you'd want from a small state manager you're going to get with valshio not bad all right i hope you enjoyed this short subject on valshio a new state manager for react i certainly enjoyed researching it and bringing it to you but i want to hear from you be sure to put that in the comment section down below or go on the description and click on the discord link and just talk to us on the discord channel all i will see you on the next one of these in the meantime be happy be healthy and be safe

Channel: Jack Herrington

Views: 2,653

Rating: 5 out of 5

Keywords: react js, react js tutorial, react js project, javascript, react tutorial, react.js, reactjs course, react.js tutorial, valtio, valtio state manager, react state management valtio, valtio for state management, react js valtio, reactjs with valtio, reactjs state management valtio, valtio reactjs, valtio tutorial, valtio react, valtio react tutorial, valtio react course, valtio state manager for reactjs, valtio state manager : reactjs, reactjs state manager valtio tutorial

Id: XnlECbwcJZ0

Length: 14min 22sec (862 seconds)

Published: Thu Nov 19 2020