The fastest way to share state in React? | Valtio Setup

hello and in this video we're going to be looking at volio which among other things is a great way to share States between your components in a react app so without further Ado let's begin looking and using this Library so over here we have a rather ordinary react app with Beats and to install it as usual we're going to go to view and terminal and we're simply going to run mpm install Volo that's all you need to do to install it once that is done you can close your terminal go to your file and folder structure into your Source folder and create a folder which we'll usually call store in this folder we'll create an index.js file or index.ts if you're using typescript inside the file everything is very simple first of all we'll have our import which is going to be proxy from volio and we can declare a variable of State equals proxy and in this array essentially is going to be our shared state for example we can have something like amount and give it a default value of zero and some is active and give it default value of false something like that we you can have any amount of values over here now let's use the state in our app first things first we can go to our terminal and run the app by using mpm run Dev now we are inside the app so here we are this is simply a website I use to test out certain components I'll actually be making the video on this one soon enough and so we can go back over here and into one of the components for example into the hero section which is this part to use it what we need to do is say const snap equals use Snapshot and import it from Volo so use this import and say State and import it from well it's not giving us a normal import because we forgot to export State out of this file so we can say export default State like this so now if everything work correct corly we should be getting this yes so now we automatically imported State and create snamp so when we want to change one of these variables or any of them we'll be using State SNAP will be used to read set variables so let me demonstrate for example we have the sentence we can change it to the current amount is open up a dynamic block and say snap. amount and as you can see we should get zero if we change this to say five we will get five however we can't change snap we can only read it to change snap we can for example create a button under here and's say increase amount and we can say onclick call a call back function in here and we can say state do amount Plus+ now we have this button and when we press it it increases the amount nothing unusual but the best part is obviously being able to share this data between components for example we can move into this component serice section which is this part over here and we can open this up uh common this part out and say the current amount is we'll do the same import as before so we can say const snap equals use Snapshot State as you can see extremely simple and simply say snap dot amount and as you can see when we click this button the number increases in both components so as you can see an extremely simple way to share State between components if you enjoyed the video please like And subscribe and I'll see you in the next one thank you

Channel: WebChain Dev

Views: 279

Keywords: react, react tutorial, react hooks, react channel, valtio, react state management, vite, web dev, webchain dev, web developpment, library, react library, programming, coding, front end developer

Id: Sp_u-A7mBew

Length: 4min 59sec (299 seconds)

Published: Thu Sep 14 2023