Mastering Typescript State using Valtio

we've been taking a look at state management in react using typescript and looking at a bunch of different state managers today we're going to look at valio so what we're going to do is re-implement a to-do list application using valshio and we've got a nice little starter point here i'm just going to clone that it's going to take care of a bunch of stuff so that we can concentrate on looking at the state manager itself so first off i'm going to go into my temporary directory and then clone the base project and i'll call this one to do valio because that's the name of the state manager we're going to look at today so let's go jump into valshio and bring up vs code now i could just do yarn to kind of get everything set up but while i'm here i might as well do yarn add and then bring in all of the libraries that i need to make this happen in this case that just means machio there's no valshio react or any of that it's just all built in one thing and it's actually really small so that's kind of cool all right while we're waiting on that let's go over and take a look at our store.ts file that's kind of where the magic is happening so we have at the top our interface for to do item it's got a number a text and a done and then there's a bunch of helper functions here the reason that these exist is i just don't want to deal with the going through all of this code what we really want to know is how the skate manager manages to stay how you do methods and that sort of stuff so this is these are some helper functions for us to make that quicker all right let's go take a look at how we're doing all right great so let's do yarn start so in this react app we've got four well really five components there's the main app component there is a toggler for dark or light mode that just happened to come with the template that i used to set up the app so i thought it was nice i just kind of left it this top component is called the top bar it includes that toggler and it includes a load button that's going to go off and get some json so they can show you how to do asynchronous work it's got a list of to-do's and it's got an ability to add a new to-do but of course none of this works because there's no state manager so let's go fix that we will go and close that out since we don't need that anymore and i'll go and create a new comment down here to say this is going to be the falcio implementation so really we want to start with defining the store so let's go and create an interface in typescript called store and in there we'll have a list of the to-do's as well as a new to do which is going to be a string and i'll bring in a function called add to do or and it's going to return a void and now i actually want to go and implement on this so up at the top here we'll import proxy from valcio and that's how you create a new store so go down here again and we'll say that the store is a proxy or in proxy will result in a store and you give it the type in here of the store you can call it whatever you want i just called it store okay so we'll say that we have a to do's and it's an empty array it's a new to do in that nice it's hinting this stuff for me make that an empty string and then add to do and in this case not going to take any arguments but what it is going to do is it's going to set store.to do's equal to the add to do which is a nice little handy helper function up here that takes a list of to do's and just appends one to it so let's just do store. to do's and then give it the new text so that's also stored on new to do and then we'll set the new to do to an empty string so we can kind of see and something makes it for a nice user experience if you want to go and add multiple to-do's okay we've got our store created so let's export that okay let's take a look over an app so obviously we're going to need to add a provider here because every state manager has a provider psych no we won't there's no provider for valio so awesome that means no extra providers up here there is a shocker provider but that's really just for the ui and the theming not to worry so okay let's go over here to to do add and first thing we need to do is import the store and then we need the react hook that's going to connect us with that proxy and in this case that's called use proxy and it's also in valio and what that does is give you a read-only snapshot of the store so we'll do use proxy and then give it the store and now we've got this read-only snapshot so we will go and add a value which is a snapshot new to do so we're getting that type hinting there because of typescript really nice and then we get a change we're going to take an event and the way that you set something is i need to say store dot new to do equals event target value just like that all right let's go to the on click handler for add to do so let's go here to store dot add to do easy peasy all right let's take a look at our running app and i'm going to fill that in and what i'm expecting to see here is that when i click add to do it's going to set that to null or empty right or empty string so it's and it does so plus plus 1 to that cool it just means that it's added it to the to-do list but we're not actually connecting that to-do list to anything so let's go do that next all right let's bring in use proxy and store and then go back there and grab the snapshot pop that into to-do list items and then pop this down here for the to-do's and we can remove this typing since we get it for free and we're looking pretty good okay so let's start off with checkbox so the checked is going to be whether it's done but we need an ability to toggle it so we need a toggle in here this should take a an id all right let's go implement on that since it's clearly not implemented right now so go over here we'll say we have a toggle it's going to take an id and while we're here we might as well go and add remove and update and the only difference is that update's going to take a string all right let's jump down here and start implementing on this so toggle is going to do toggle to do it's going to take an id which is a number like that and then two more we got remove which is going to remove it to do and then we got update which is gonna update a to do but that takes a text string so you gotta add that and then finally piece of text okay let's go back over our to-do list hey it looks like that's happy so let's continue on let's do uh on change again we'll take an event and we'll do store dot update the given id and then the event target value and then down here on the on click we'll do store dot remove and then give it the id easy peasy let's go check this out so if i go and add to do hey there we go can we toggle it sure we can can we change the text sure we can can we delete it yes we can awesome so now the only thing that is left is this load button so we'll go over here to top bar and let me show you the json then we're going to go load i just want to show you how asynchronous behavior works it's very difficult requires thunking and all that no it doesn't i'm just kidding uh okay so we've got a bunch of to-do's they match exactly to do format and we just want to go and fetch that so i'll go and copy this create an on load handler which does a fetch no i don't know what [Laughter] get heap statistics sure okay that's kind of neat actually then we'll get our response back we'll convert that to json and then with that we will have a a list of to-do's let's just be nice about it say that we have a to-do array that we got back and we want to do a store dot to do's equals data and vs code for once in its life was super helpful i'm just kidding i love vs code uh to bring in storing to do up there so that's great let's go over here to the click of the button and load that in there i love me some vs code it's fine okay so load and there you go a voila it went and overwrote all of the to do's with the to do's from the json file so there you go now you know as you've seen here before we could go and add i could go and add a load in here or the url it's really totally up to you uh valio's super friendly when it comes to building out your api the way that you want it okay so i certainly hope you've enjoyed learning about valshio and seeing how it works with our to-do model let's talk a little bit about the pros and the cons and the comparison with other state managers to me one of the big pros is it's just that easy to use as you've seen it's really easy to get started with and get an implementation going it's also really really small it's about 5kb which is about one of the smallest state managers that we're going to look at it also has no provider which i think is really critical we started to see this expansion of providers at the app level and these are components that the app really doesn't know or care about it just has to be there in order to get that data sprinkled throughout the reactory if you don't need a provider then any component can talk to any other component through a velcio store which is really much easier to use and cuts down on that provider creep the only con i can think of is it just hasn't seen as much adoption as we'd like to see currently at the making of this video it was about a thousand downloads a week which is not great and i would love to see the exposure in this video get valshio a little bit more credit i think it deserves a lot of it but i want to hear what you think be sure to put that in the comments section down below any comments or suggestions or concerns or ideas you have feel free to let me know you can also jump on the discord server there's a link to that in the description have a chat with us directly that's always great of course feel free to like and share this video with your friends hit that subscribe button if you haven't already for me to you in the meantime be happy be healthy and be safe

Channel: Jack Herrington

Views: 5,975

Keywords: react js, reactjs, typescript, typescript react, typescript generics, typescript interface, valtio state management, typescript for valtio, typescript and valtio, typescript state management valtio, valtio state manager, typescript proxy state manager, valtio for typescript, valtio state manager for typescript, ts valtio, valtio for ts, ts with valtio, typescript with valtio, valtio typescript, typescript state management, valtio for state management

Id: rWanEGMkXwc

Length: 12min 33sec (753 seconds)

Published: Sun May 02 2021