Solid JS Tutorial #12 - Using Stores

Key Takeaways

or at the gang so in this lesson I want to talk about another way of managing the state using something called stores and I mentioned those briefly back when we talked about signals earlier on in the playlist and I said that although we can use signals to store objects and arrays they're not optimized as well as stores to deal with them so instead of using signals for deeply nested objects and arrays we can use stores instead which are a little bit more optimized for those types of data because stores treat each object property as its own signal or each property value as its own signal and it's the same with arrays it would treat each item in an array as its own signal essentially so when we're updating the values of these objects or arrays it lets us pinpoint exactly the one part of them that we need to update and we don't have to treat it so much as a single value as we would when we're using Create signal so let's have a look at some examples of stores now in this solid.js playground so I've already created a couple of stores here for us to play around with and you're going to see we've used this function create store to create them and we've imported that up here at the top as well and this is pretty much the only difference on the surface of things at the minute because before this was create signal but we still pass in the same object into this and we still get two values back in Array format we have person to access the store data and we have set person which is a Setter function to set the new value now we also have an example down here using an array as a value so create store again we pass in the array and each item in the array is just an object with a title a price and an ID and we call those products and the setup function is set products now the first difference is when we come to access the values because these are no longer essentially getter functions but kind of proxy objects and we don't need to invoke products in order to get it we don't need to invoke person in order to get it instead we just say person and then dot whatever value we want so dot name dot first.name.last down here we use a four component to cycle through the product again we don't invoke it and we output a bit of template for each product just a paragraph tag where we get the title and the price and we can see those here and the names right here the real difference now apart from non-invoking this is how we update things because like I said a minute ago solid.js when we're using stores treats each property value as its own signal so we can update those independently of the entire value so I'm going to show you how we can do that now so first of all I'm going to come down here and I'm going to place a button at the bottom of the template and this button is going to be used to maybe I don't know change one of the products update a product in fact we'll do one for the name as well so let's do a button up here like so and close this off and in this one we will say change the last name so we're going to click on this to update the last name of the person and then down here we'll say change a product okay so we'll do the name one first of all so I'm going to say on click and we set that equal to some kind of function now I'm going to call that function change name and we need to make it up here so let's do a function below this door for the person so function change name and then inside here we want to use this function oops we want to use this function set person to update the name so we say set person and previously when we use signals we basically pass through the entire object again so with copy all that where you'd pass it in here and we'd just change the first name or something now we don't have to do that when we're using stores instead we can pinpoint which value or which property we want to update so I could say for example first I want to access the name property which is this then as a second argument I would want to access the first property which is this and then once I've reached my destination the new value of that will be the third argument and that could be Mario for example so this right here is a path to whatever property we want to update okay let's spell function correctly so now when we click on this button down here change name is that working okay I've used Capital here change name so if I click on this it should update the first name to Mario we do say change the last name let's change this to First so change the first name click on that and it changes it to Mario so you can look at this as a path to whatever property you want to update okay all right so let's do another example with the products so down here I'm going to create another function so const or rather we'll just say function and this will be change product and what we'll do is we'll pass in the ID of the product that we want to change we're not going to use it originally right now but we will do in a minute so I'm going to say set products in here and again we have like a path to the product that we want to update this time it's an array so we can pass through the index first of all of the item we want to update so I could say zero to get the first item in the array and that's what I want to update then it would be the property so I could change the price property for example so I'd specify that as the second argument and then finally the value which could be 25. like so so now we're updating this 10 value to 25. I'm going to get rid of that ID because we don't need it just yet but down here I'm going to say on click and I'm going to set that equal to change product like so so let me come down here change the product and you can see this is now 25 pounds awesome so again when we're working with arrays this is like a path to the value that we want to update let me comment this out and do one more example because as well as a path right here to the array number the index we can also use a function and we can use that for any argument to specify or to work out what position or what property we want to update so let me do an example set products now the first argument is going to be a function right here which finds one of these items so it will fire a function for each of these items and do a check if we return true for that particular item then it will select the item in the array does that make sense and update that one so what I'm going to do is wrap this inside another inline function just so we can pass through in ID property so say for example I want to update the product with the ID of 2 which is this one right here so now we get the ID as an argument and we can use the ID in this function so like I said this function Fires for each product and we get access to that product as an argument which I'll call P and I want to return true where P dot ID is equal to the ID that we pass in so I'll say p dot ID is equal to the ID that we pass in and that means that it's going to return true for this one because P to ID 2 is going to equal 2. so it will select this object right here at this position in the array for the second argument again I'll just say I'll update the price and then the new value which is going to be 50. so I think that's pretty much it so now if I change a product down here it should be this one that changes to 50 which it does awesome so hopefully you can see how much easier it is to update different properties or different array elements and properties in those array elements using stores instead of signals and we're going to be using stores in our project in probably one or two lessons time but for now this should give you a general overview of how we create stores and how we update different properties in those stores